Angular ng-repeat Error "Duplicates in a repeater are not allowed."

Question

I am defining a custom filter like so:

<div class="idea item" ng-repeat="item in items" isoatom>         <div class="section comment clearfix" ng-repeat="comment in item.comments | range:1:2">         ....     </div> </div> 

As you can see the ng-repeat where the filter is being used is nested within another ng-repeat

The filter is defined like this:

myapp.filter('range', function() {     return function(input, min, max) {         min = parseInt(min); //Make string input int         max = parseInt(max);         for (var i=min; i<max; i++)             input.push(i);         return input;     }; }); 

I'm getting:

Error: Duplicates in a repeater are not allowed. Repeater: comment in item.comments | range:1:2 ngRepeatAction@https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/an

Answer 1

The solution is actually described here: http://www.anujgakhar.com/2013/06/15/duplicates-in-a-repeater-are-not-allowed-in-angularjs/

AngularJS does not allow duplicates in a ng-repeat directive. This means if you are trying to do the following, you will get an error.

// This code throws the error "Duplicates in a repeater are not allowed. // Repeater: row in [1,1,1] key: number:1" <div ng-repeat="row in [1,1,1]"> 

However, changing the above code slightly to define an index to determine uniqueness as below will get it working again.

// This will work <div ng-repeat="row in [1,1,1] track by $index"> 

Official docs are here: https://docs.angularjs.org/error/ngRepeat/dupes

Answer 2

For those who expect JSON and still getting the same error, make sure that you parse your data:

$scope.customers = JSON.parse(data)