mrquad mrquad - 1 month ago 11
AngularJS Question

AngularJS - Duplicate Key in ngrepeat error

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!

Answer

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

Comments