CODEWITHSUNDEEP
angularjs
user2954587
user2954587

Reputation: 4861

Nested array ng-repeat error: [ngRepeat:dupes]

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?

Upvotes: 0

Views: 1211

Answers (1)

Josh
Josh

Reputation: 44906

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"

Upvotes: 2

Related Questions