CODEWITHSUNDEEP
angularjs
Hamed
Hamed

Reputation: 410

Why I get error Error: [ngRepeat:dupes] in Angular JS?

I use ng-repeat:

<option ng-selected="key == formData.city" ng-repeat="(key, value) in data.cities | orderBy:value" value="{{key}}">{{value}}</option>

data.cities is array.

Also I have method that gets array of cities from AJAX response and sets it to exists array $scope.data.cities:

request.success(function (data) {
      var arr = []
      angular.forEach(data.res, function(item) {
      arr[item.id] = item.name;
      });

  $scope.data.cities = arr;
});

Why after response I get error: [ngRepeat:dupes]?

Upvotes: 0

Views: 258

Answers (1)

Artem Petrosian
Artem Petrosian

Reputation: 2954

You have to use track by $index with your ng-repeat to avoid duplicates:

ng-repeat="(key, value) in data.cities track by $index | orderBy:value"

https://docs.angularjs.org/error/ngRepeat/dupes

Update: You memory leak might be a reason of using array:

var arr = [];

For example, if your cities.id looks like 1001 this will produce an array with 1000 empty items and one with your city.

In your situation I would recommend to use an Object instead of Array:

request.success(function (data) {
    var obj = {};
    angular.forEach(data.res, function(item) {
       obj[item.id] = item.name;
    });

    $scope.data.cities = obj;
});

Also, you can replace ng-repeat with ng-options here:

<select ng-model="formData.city" ng-options="key as value for (key, value) in data.cities">

Upvotes: 2

Related Questions