symon kt1 symon kt1 - 3 months ago 16
JSON Question

How to display JSON data in html page using ng-repeat in AngularJS?

I have one JSON data how to display these data using ng-repeat?
I am new in angularJS. I dont how to to repeat nested in ng-repeat in angularJS
This is my JSON data.Please help me to show the outputs?

How to get these data using ng-repeat

customerId=56b6f841d085980f2241909c

name: Maxxwell

Total Product=2

Total Price=685 //(2*18.5)+240(3*(240*10/100))

createdOn: 07-Feb-2016 10:50:05 UTC

etc....


See $scope.orders is an array
I call an api and got this data

orderPromise.success(function(data, status, headers, config)
{
$scope.orders=
[
{

"customerId": "56b6f841d085980f2241909c",
"address": {
"name": "Maxxwell",
"city": "Texas",
"country": "USA",

},
"products": [
{
"productId": "569df8bcd08598371e9b5ad9",
"quantity": 2,
"productDetails": {
"itemId": "569df86dd08598371e9b5ad8",
"actualPrice": "18.5",
"offer": 0,
"modifiedOn": "19-Jan-2016 12:35:32 UTC"
}
},
{
"productId": "569f2d2dd085980ecfc8997b",
"quantity": 3,
"productDetails": {
"itemId": "569f294dd085980ecfc89971",
"actualPrice": "240",
"offer": 10,
"modifiedOn": "06-Feb-2016 09:09:46 UTC"
}
}
],
"createdOn": "07-Feb-2016 10:50:05 UTC"
}
]
});


I need to display this output using ng-repeat in html page

customerId=56b6f841d085980f2241909c
name: Maxxwell
Total Product=2
Total Price=685 //(2*18.5)+240(3*(240*10/100))
createdOn: 07-Feb-2016 10:50:05 UTC
:
:


I don't know its correct or not but its not working in my html page
Please correct me if it is wrong?

$scope.ordertemp=[];
$scope.orderval={};

var countval = $scope.orders.length;

for(var j=0;j<countval;j++)
{
$scope.orderval.buyerId = $scope.orders[j].customerId;
$scope.orderval.name = $scope.orders[j].address.name

$scope.orderval.totalitem = $scope.orders[j].products.length


var count = $scope.orders[j].products.length
var total = 0;
var save=0;
for(var i=0;i<count;i++)
{

var actualprice = 0;
var offer = 0;
var price = 0;
var quantity=0;


actualprice = $scope.orders[j].products[i].productDetails.actualPrice;
offer = $scope.orders[j].products[i].productDetails.offer;
quantity = $scope.orders[0].products[i].quantity;

price = actualprice - (actualprice * offer)/100
total = total + (price * quantity);
save = save +((actualprice/100)*offer)* quantity

}
}

$scope.orderval.totalprice = total;
$scope.orderval.save = save;

$scope.ordertemp.push($scope.orderval);

alert(JSON.stringify($scope.ordertemp));


When i alert this data will shown but its not repeated in my ui page Why?
Can i add any filter for using this to add Total price?

Answer

you can also do like this,First flatten your response as your need. Like below

 $scope.orders=
[
     {

      "customerId": "56b6f841d085980f2241909c",
      "address": {
           "name": "Maxxwell",              
           "city": "Texas",
           "country": "USA",

      },
      "products": [
           {
            "productId": "569df8bcd08598371e9b5ad9",
            "quantity": 2,
            "productDetails": {
                 "itemId": "569df86dd08598371e9b5ad8",                         
                 "actualPrice": "18.5",
                 "offer": 0,                         
                 "modifiedOn": "19-Jan-2016 12:35:32 UTC"
            }
           },
           {
            "productId": "569f2d2dd085980ecfc8997b",
            "quantity": 3,
            "productDetails": {
                 "itemId": "569f294dd085980ecfc89971",                         
                 "actualPrice": "240",
                 "offer": 10,                         
                 "modifiedOn": "06-Feb-2016 09:09:46 UTC"
            }
           }
      ],          
      "createdOn": "07-Feb-2016 10:50:05 UTC"
     }
]

Now code for flatten the response

 var myFinalArr = [];
           for (index in $scope.orders) {
                var obj = {};
                var productSum = 0;
                obj.customerId = $scope.orders[index].customerId;
                obj.name = $scope.orders[index].address.name;
                obj.city = $scope.orders[index].address.city;
                obj.country = $scope.orders[index].address.country;
                obj.createdOn = $scope.orders[index].createdOn;
                obj.productCount = $scope.orders[index].products.length;
                for (index2 in $scope.orders[index].products) {
                     productSum = parseFloat(productSum) + parseFloat($scope.orders[index].products[index2].productDetails.actualPrice);
                     if (index2 == ($scope.orders[index].products.length) - 1) {
                          obj.productSum = productSum;
                     }
                }
                myFinalArr.push(obj);
           }
           console.log(myFinalArr);// your final Arr
           $scope.orders = myFinalArr;

           })

In view use this

           <div ng-repeat = "orderData in orders">
                <div>CustomerId : {{orderData.customerId}}</div>
                <div>Name : {{orderData.name}}</div>
                <div>Total Product : {{orderData.productCount}}</div>
                <div>Total Price : {{orderData.productSum}}</div>
                <div>CreatedOn : {{orderData.createdOn}}</div>
           </div>