Search code examples
javascriptjsonangularjsfor-loopangularjs-ng-repeat

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


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?


Solution

  • 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.