Get nested values from JSON with angularJS

Question

I need to get nested products from JSON to my html in <div ng-repeat="order in orders"></div> I tried many versions of getting products values(name, description etc.) but none of them works. How to do this ?

JSON:

[  
   {  
      "id":3,
      "date":"00:00:00",
      "user":{  
         "id":1,
      },
      "orderState":{  
         "id":1,
      },
      "products":[  
         {  
            "id":1,
            "name":"Bosch POF 1200",
            "description":"1200W",
            "enabled":true,
            "price":459,
         },
         {  
            "id":9,
            "name":"Graphite 58G782",
            "description":"a",
            "enabled":true,
            "price":429,
         }
      ]
   }
]

Controller

OrdersService.retrieveAllByCurrentUser().then(function(response) {
  $scope.orders = response.data;
  console.log(response.data);
}, function(error) {
  registerError(error, 'retrieving all orders');
});

Answer 1

The ng-repeat directive creates a new scope, which means that you should be able to loop through the products within it like this:

<div ng-repeat="order in orders">
<div ng-repeat="product in order.products"> e.g. {{product.name}} </div>
</div>

I would also advise to write a directive for dealing with that kind of stuff, because your code can get unreadable really fast. Don't take my word for it though as I am no Angular expert.

Answer 2

Create a nested ng-repeat like this to access the products information:

<div ng-repeat="order in orders">
  <div ng-repeat="product in order.products">
    <h1 ng-bind="product.name"></h1>
    <p ng-bind="product.description"></p>
  </div>
</div>

For each order it will go into order.products and loop out the information as product, then you can access the information in product via dot notation, like product.name for example.

Answer 3

You can do nested ng-repeat in html

 <div ng-repeat="order in orders">
    <div ng-repeat "product in order.products">
        <span>{product.name}}</span>
        <span>{{product.description}}</span>
    </div>
</div>