How to display JSON data in html page using ng-repeat in AngularJS? -
i have 1 json data how display these data using ng-repeat? new in angularjs. dont how to repeat nested in ng-repeat in angularjs json data.please me show outputs?
how 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 array call api , got 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 display 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 correct or not not working in html page please correct me if 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 alert data shown not repeated in ui page why? can add filter using add total price?
you can this,first flatten response need. 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 flatten response
var myfinalarr = []; (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; (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);// final arr $scope.orders = myfinalarr; })
in view use
<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>
Comments
Post a Comment