0

I have an object I'm trying to iterate through and having trouble nesting the ng-repeats

$scope.report_data = {
  data [
    system_0: [
      0: "string",
      1: 435,
      2: "another value"
    ]
  ], 
  headers [
    0: [
      0:"title"
      1: "CHA"
    ]
  ]
}

I'm trying to build a table with the headers as th's and each piece of data is mapped to the headers.

What I have right now is

<table>
  <thead>
    <tr>
      <th ng-repeat="header in report_data.headers">{{ header.0 }}</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td ng-repeat="system in report_data.data">
        <span ng-repeat="_item in system">{{ _item }}</span>
      </td>
    </tr>
  </tbody>
<table>

But I'm not able to iterate over each item in each system and add it as a column. The error I'm receiving is Error: [ngRepeat:dupes]

What's the best way to iterate over nested arrays?

user2954587
  • 4,661
  • 6
  • 43
  • 101
  • possible duplicate of [Angular ng-repeat Error "Duplicates in a repeater are not allowed."](http://stackoverflow.com/questions/16296670/angular-ng-repeat-error-duplicates-in-a-repeater-are-not-allowed) – PSL Oct 27 '14 at 20:39
  • Another one http://stackoverflow.com/questions/20452223/ng-repeat-not-working-over-collections-that-contains-dupes – PSL Oct 27 '14 at 20:39
  • http://stackoverflow.com/questions/26152576/ngrepeatdupes-duplicates-in-repeater-with-nested-ngrepeat-and-empty-strings/26152601#26152601 – PSL Oct 27 '14 at 20:41

1 Answers1

2

By default ng-repeat uses a hash of the entire object to track insertions/deletions by in order to make optimize DOM manipulation. This has to be unique or else it will fail.

So two objects with the same properties and values will collide.

You can be explicit about what property to track using the track by syntax, but again, this must be unique.

As a last resort you can use track by $index to get around having duplicate entries.

ng-repeat="widget in widgets track by $index"
Josh
  • 44,706
  • 7
  • 102
  • 124