Error: [ngRepeat:dupes] what does this mean?

Question

repeat directive outputing wine records from an api. I have a factory function to serve up the wine API which is then accessed in my controller

app.factory("Wine", function ($http){
     var factory = {};

     //getWines 
     factory.getWines = function(){ 
      return $http.get("http://www.greatwines.9000.com")
     }

}

Controller:

    app.controller("winesCtrl", function($scope, $http, Wine){
        Wine.getWines()
         .success(function(wines){
           $scope.wines = wines;
        })
        .error(function(){
             alert("Error!");
         });
    });

VIEW:

<h2>Wine list</h2>
    <div class="row margin-top-20 wine-container" ng-repeat="wine in wines">
        <div class="col-sm-3">
            <img src="{{wine.picture}}" class="img-responsive" />
        </div>
        <div class="col-sm-9">
            <div class="margin-top-20">
                <span class="bold">Name: </span><span>{{wine.name}}</span>
            </div>
            <div>
                <span class="bold">Year: </span><span>{{wine.year}}</span>
            </div>
            <div>
                <span class="bold">Grapes: </span><span>{{wine.grapes}}</span>
            </div>
            <div>
                <span class="bold">Country: </span><span>{{wine.country}}</span>
            </div>
            <div>
                <span class="bold">Region: </span><span>{{wine.region}}</span>
            </div>
            <div>
                <span class="bold">Price: </span><span>{{wine.price}}</span>
            </div>
            <div>
                <span class="bold">{{wine.description}}</span>
            </div>
            <div class="margin-top-20">
                <a href="#/wines/{{wine.id}}" class="btn btn-default">Edit Wine</a>
            </div>
        </div>
    </div>

I clicked on this error and in typical "vague" angularjs fashion I get this:

Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: wine in wines, Duplicate key: string:e, Duplicate value: e

What does this mean? wine is not the same as "wines" so why does it think it is a duplicate?

score 23 · Answer 1 · edited Apr 21 '19 at 06:22

23

It is true that AngularJS uses keys to associate DOM nodes with items. So, you can solve by adding "track by $index".

It will look like this

ng-repeat="wine in wines track by $index"

edited Apr 21 '19 at 06:22

Kostas Minaidis

4,681
3
17
25

answered Mar 26 '18 at 06:21

Y. Tiwari

231
3
4

score 22 · Answer 2 · edited May 23 '17 at 11:54

22

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

This means that $scope.wines have some values which are duplicate.

You can also refer this post : Angular ng-repeat Error "Duplicates in a repeater are not allowed."

edited May 23 '17 at 11:54

Community

1
1

answered Oct 08 '15 at 15:17

Sourabh Agrawal

856
10
22

1

Thanks but it still does not make sense to me. Also I added http://www.greatwines.9000.com/wines at the end of the HTTP request and for some reason it now works. I keep coming across these mysterious bugs and fixes with angularjs. It is not very consistent. – HGB Oct 08 '15 at 22:21

Error: [ngRepeat:dupes] what does this mean?

2 Answers2

Linked

Related