Iterate through complex JSON array in Angular JS Controller and display specific values

Question

{
   "products":[
      {
         "recommendation":{
            "currentLevel":79,
            "maxLevel":100
         },
         "items":[
            {
               "id":"10600",
               "title":"Hampton Cookset - 8 Piece",
               "category":"STAINLESS STEEL",
               "imageUrl": "http://localhost/img/001.jpg",
               "unitsInCartons": 10,
               "unitCost":4.52,
               "packSize":10,
               "secondaryCategory":"Chairs"
            }
         ]
      },
      {
         "recommendation":{  
            "currentLevel":79,
            "maxLevel":100
         },
         "items":[  
            {  
               "id":"10870",
               "title":"MELAMINE BOWL",
               "category":"BOWLS",
               "imageUrl":"http://localhost/img/001.jpg",
               "unitsInCartons":6,
               "unitCost":0.93,
               "packSize":5,
               "secondaryCategory":"Kids Home"
            },
            {  
               "id":"10820",
               "title":"PP YUM YUM CUP",
               "category":"CUPS/MUGS",
               "imageUrl":"http://localhost/img/002.jpg",
               "unitsInCartons":12,
               "unitCost":0.7,
               "packSize":25,
               "secondaryCategory":"Kids Home"
            }
         ]
      }
   ]
}

I am trying to iterate through the above JSON code and my objective is to display all the title, category, unitsInCarton, unitCost and packSize values in the view in the form of a table in Angular JS.

I am new to Angular and would love some help with pointers regarding how exactly to iterate to achieve my task.

Erazihel · Accepted Answer · 2017-04-20 09:04:14Z

You might be able to do it nesting ng-repeat using Angular, but this is bad for performance. I'd recommend to first parse the data to get the expected format and then use only one ng-repeat.

Using the .map function for the products and the items, I was able to output the expected result (by flattening the result at the end).

var data = {
   "products":[
      {
         "recommendation":{
            "currentLevel":79,
            "maxLevel":100
         },
         "items":[
            {
               "id":"10600",
               "title":"Hampton Cookset - 8 Piece",
               "category":"STAINLESS STEEL",
               "imageUrl": "http://localhost/img/001.jpg",
               "unitsInCartons": 10,
               "unitCost":4.52,
               "packSize":10,
               "secondaryCategory":"Chairs"
            }
         ]
      },
      {
         "recommendation":{  
            "currentLevel":79,
            "maxLevel":100
         },
         "items":[  
            {  
               "id":"10870",
               "title":"MELAMINE BOWL",
               "category":"BOWLS",
               "imageUrl":"http://localhost/img/001.jpg",
               "unitsInCartons":6,
               "unitCost":0.93,
               "packSize":5,
               "secondaryCategory":"Kids Home"
            },
            {  
               "id":"10820",
               "title":"PP YUM YUM CUP",
               "category":"CUPS/MUGS",
               "imageUrl":"http://localhost/img/002.jpg",
               "unitsInCartons":12,
               "unitCost":0.7,
               "packSize":25,
               "secondaryCategory":"Kids Home"
            }
         ]
      }
   ]
};

var items = data.products.map(function (product) {
  return product.items.map(function (item) {
   return {
      title: item.title,
      category: item.category,
      unitsInCarton: item.unitsInCarton,
      unitCost: item.unitCost,
      packSize: item.packSize,
    };
  });
});

items = [].concat.apply([], items);

console.log(items);

Weedoze · Accepted Answer · 2017-04-20 09:13:20Z

Using directly ng-repeat

angular.module("app", [])
  .controller("ctrl", function($scope) {

    $scope.arr = {"products":[{"recommendation":{"currentLevel":79,"maxLevel":100},"items":[{"id":"10600","title":"Hampton Cookset - 8 Piece","category":"STAINLESS STEEL","imageUrl":"http://localhost/img/001.jpg","unitsInCartons":10,"unitCost":4.52,"packSize":10,"secondaryCategory":"Chairs"}]},{"recommendation":{"currentLevel":79,"maxLevel":100},"items":[{"id":"10870","title":"MELAMINE BOWL","category":"BOWLS","imageUrl":"http://localhost/img/001.jpg","unitsInCartons":6,"unitCost":0.93,"packSize":5,"secondaryCategory":"Kids Home"},{"id":"10820","title":"PP YUM YUM CUP","category":"CUPS/MUGS","imageUrl":"http://localhost/img/002.jpg","unitsInCartons":12,"unitCost":0.7,"packSize":25,"secondaryCategory":"Kids Home"}]}]}

  })

table {
  border-collapse: collapse;
}

table,
th,
td {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <table>
    <thead>
      <th>title</th>
      <th>category</th>
      <th>units in carton</th>
      <th>unit cost</th>
      <th>pack size</th>
    </thead>
    <tbody ng-repeat="product in arr.products">
      <tr ng-repeat="item in product.items">
        <td>{{item.title}}</td>
        <td>{{item.category}}</td>
        <td>{{item.unitsInCartons}}</td>
        <td>{{item.unitCost}}</td>
        <td>{{item.packSize}}</td>
      </tr>
    </tbody>
  </table>

</div>

Sachila Ranawaka · Accepted Answer · 2017-04-20 07:44:48Z

you can use ng-repeat to display data in the html

<table >
  <tr ng-repeat="product in arr.products">
     <td>
      <table>
        <tr ng-repeat="item in product.items">
          <td>{{item.title}}</td>
          <td>{{item.category}}</td>
          <td>{{item.unitsInCarton}}</td>
          <td> {{item.unitCost}}</td>
          <td> {{item.packSize}}</td>
        </tr>
      </table>
     </td>
  </tr>
</table>

angular.module("app",[])
.controller("ctrl",function($scope){

$scope.arr = {
   "products":[
      {
         "recommendation":{
            "currentLevel":79,
            "maxLevel":100
         },
         "items":[
            {
               "id":"10600",
               "title":"Hampton Cookset - 8 Piece",
               "category":"STAINLESS STEEL",
               "imageUrl": "http://localhost/img/001.jpg",
               "unitsInCartons": 10,
               "unitCost":4.52,
               "packSize":10,
               "secondaryCategory":"Chairs"
            }
         ]
      },
      {
         "recommendation":{  
            "currentLevel":79,
            "maxLevel":100
         },
         "items":[  
            {  
               "id":"10870",
               "title":"MELAMINE BOWL",
               "category":"BOWLS",
               "imageUrl":"http://localhost/img/001.jpg",
               "unitsInCartons":6,
               "unitCost":0.93,
               "packSize":5,
               "secondaryCategory":"Kids Home"
            },
            {  
               "id":"10820",
               "title":"PP YUM YUM CUP",
               "category":"CUPS/MUGS",
               "imageUrl":"http://localhost/img/002.jpg",
               "unitsInCartons":12,
               "unitCost":0.7,
               "packSize":25,
               "secondaryCategory":"Kids Home"
            }
         ]
      }
   ]
}
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<table >
  <tr ng-repeat="product in arr.products">
     <td>
      <table>
        <tr ng-repeat="item in product.items">
          <td>{{item.title}}</td>
          <td>{{item.category}}</td>
          <td>{{item.unitsInCarton}}</td>
          <td> {{item.unitCost}}</td>
          <td> {{item.packSize}}</td>
        </tr>
      </table>
     </td>
  </tr>
</table>
  
</div>

Collectives™ on Stack Overflow

Iterate through complex JSON array in Angular JS Controller and display specific values

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related