Loop through objects containing arrays in AngularJS

Question

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

can you create a reproducible demo of the issue using stack snippets.. And do you get any errors? — Manish
– Manish, Commented Oct 10, 2019 at 6:48

score 1 · Accepted Answer · 2019-10-10 07:04:38Z

1

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>

edited Oct 10, 2019 at 7:04

answered Oct 10, 2019 at 6:53

user11371816

Sign up to request clarification or add additional context in comments.

1 Comment

Larsmanson Over a year ago

Not working unfortunately. Getting error: Error: "[ngRepeat:dupes]"

Collectives™ on Stack Overflow

Loop through objects containing arrays in AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related