"Duplicates in a repeater are not allowed" on ng-repeat

Question

I've got the following json data returned from a service request:

{     "entries": [{         "id": 2081,         "name": "BM",         "niceName": "bodmas"         }]     }, {         "id": 8029,         "name": "Mas",         "niceName": "Masm"         }]     }],     "count": 2 } 

And I am trying the following code in html to loop through this data:

<option ng-repeat="entry in entries" value="{{entry.name}}">{{entry.name}}</option> 

I get the following error when I run the code:

Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: entry in entries, Duplicate key: string:c 

Following is the code for my controller:

myApp.controller("MyController", ['$scope', '$http', '$log', function($scope, $http, $log){        ...         $http.get('https://myServiceURL').success(function(data){                     $scope.entries = data;         }); }]); 

Could somebody help me understand why am I getting that error?

Answer 1

Add track by $index to your ng repeat so instead of:

<option ng-repeat="entry in entries" value="{{entry.name}}">{{entry.name}}</option> 

Try:

<option ng-repeat="entry in entries track by $index" value="{{entry.name}}">{{entry.name}}</option> 

There's further information about this in the documentation for this error message:

Occurs if there are duplicate keys in an ngRepeat expression. Duplicate keys are banned because AngularJS uses keys to associate DOM nodes with items.

By default, collections are keyed by reference which is desirable for most common models but can be problematic for primitive types that are interned (share references).

Answer 2

Your JSON is invalid and should be :

{     "entries": [{         "id": 2081,         "name": "BM",         "niceName": "bodmas"     }, {         "id": 8029,         "name": "Mas",         "niceName": "Masm"     }],     "count": 2 } 

Also, make sure you are accessing the document at the right level, use :

$http.get('https://myServiceURL').success(function(data){     $scope.entries = data.entries; }); 

Then, it should work. See this JSBin.