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

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

caching - How to check if a url path exists in the service worker cache -

Redirect to a HTTPS version using .htaccess -