AngularJS - Duplicate Key in ngrepeat error

Question

I want to parse this controller in my view:

testapp.controller("searchController", function($scope, $rootScope, $http, $location) {

    var load = function() {
        console.log('call load()...');

        var url = 'products.json';

          if($rootScope && $rootScope.appUrl) {
                url = $rootScope.appUrl + '/' + url;
              }

        $http.get(url)
         .success(function(data, status, headers, config) {
      $scope.product = data;
      angular.copy($scope.product, $scope.copy);
         });
    }

    load();



});

However I have implemented the parsing like that:

<div class="container main-frame" ng-app="testapp"
    ng-controller="searchController" ng-init="init()">
    <h1 class="page-header">Products</h1>
    <table class="table">
        <thead>
            <tr>
                <th width="25px">ID</th>
                <th>TITLE</th>
                <th>PRICE</th>
                <th>Description</th>
                <th width="50px"></th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="p in product">
                <td>{{p.id}}</td>
                <td>{{p.title}}</td>
                <td>{{p.price}}</td>
                <td>{{p.description}}</td>
                <!-- ng-show="user.id &&user.id==e.user_id" -->
            </tr>
        </tbody>
    </table>
    <!-- ng-show="user.username" -->
    <p>
</div>

What I am currently getting is:

Error: [ngRepeat:dupes] http://errors.angularjs.org/1.2.8/ngRepeat/dupes?p0=p%20in%20product&p1=string%3A%22
    at Error (native)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:6:449
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:184:445
    at Object.fn (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:99:371)
    at h.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:100:299)
    at h.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:103:100)
    at f (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:67:98)
    at E (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:71:85)
    at XMLHttpRequest.v.onreadystatechange (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js:72:133)

I tried to change it to:

p in product by $id

which gives me a syntax error.

I appreciate your suggestions!

Jay Shukla · Accepted Answer · 2014-02-17 13:02:05Z

6

try this

<tr ng-repeat="p in product track by $index">
      <td>{{p.id}}</td>
      <td>{{p.title}}</td>
      <td>{{p.price}}</td>
      <td>{{p.description}}</td>
</tr>

Usage of track by

edited Feb 17, 2014 at 13:02

answered Feb 17, 2014 at 12:49

Jay Shukla

5,8368 gold badges35 silver badges65 bronze badges

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

2 Comments

Carol.Kar Over a year ago

Thx for your answer! Why track? Whats the logic behind it?

Jay Shukla Over a year ago

Angular use $$hashKey to track DOM elements, it uses for data binding.

Collectives™ on Stack Overflow

AngularJS - Duplicate Key in ngrepeat error

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related