Search code examples
jsonangularjsangularjs-ng-repeat

Loop through objects containing arrays in AngularJS

I have a JSON structure where I want to loop through the data within an array, but I can't seem to get it working with ng-repeat in AngularJS.

This is the JSON structure

{
    "header": ["header1", "header2"],
    "content": {
        "Data1": ["data1", "data2"],
        "Data2": ["data1", "data2"]
    }
}

In my html I do this:

<div ng-repeat="item in header">
  <li>{{item}}</li>
  <div ng-repeat="(key, value) in content">
    <li>{{key}}</li>
    <li>{{value}}</li>
  </div>
</div>

The header data is retrieved fine but I can't loop through the arrays in the Data1 and Data2 objects

Solution

  • Try this

    <div ng-repeat="item in header track by $index">
  <li>{{item}}</li>
  <div ng-repeat="(key, value) in content track by $index">
    <li>{{key}}</li>
    <li ng-repeat="val in value track by $index">{{val}}</li>
  </div>
</div>