symon kt1 February 2016

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))

Answers


Zonedark February 2016

You can do :

    <div ng-repeat="order in orders">
       <div>
        customerId={{order.customerId}}
        </div>
        <div>
        name:{{order.address.name}}
        </div>
        <div>
        Total product={{order.products.length}}
        </div>
</div>

And you'll need a function or a watch to get the total of your products. If you give me a Plnkr or Jsfiddle link with a working sample I could probably provide a more complete answer if you need.

Happy coding!


rroxysam February 2016

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 == ($sco 


Mahantesh Kumbar February 2016

try this

<div ng-repeat="(key, value) in orders">
      <p>{{value.customerId}}</p>
      <p>{{value.createdOn}}</p> 
      <p>{{value.address.name}}</p> 
    <div ng-repeat="(key, provalues) in value.products">
       <p>{{provalues.quantity}}</p>
       <p>{{provalues.productDetails.actualPrice}}</p>
    </div>
</div>


Shalabh Raizada February 2016

To display json Data in html add json filter to your expression like

<div ng-repeat="order in revoluza = (orders | json)">
  <div>
    customerId={{order.customerId}}
  </div>
  <div>
    name:{{order.address.name}}
  </div>
  <div>
    Total product={{order.products.length}}
  </div>
</div>

Post Status

Asked in February 2016
Viewed 1,657 times
Voted 4
Answered 4 times

Search




Leave an answer