Repeating items must be unique; duplicates are not permitted on ng-repeat

Question

Repeating items must be unique; duplicates are not permitted on ng-repeat

The data retrieved from the service request is in JSON format and looks like this:

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

I'm attempting to loop through this data using the following HTML code:

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

However, running the code results in an error message:

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

Here is the snippet of code from my controller:

myApp.controller("MyController", ['$scope', '$http', '$log', function($scope, $http, $log){
       ...

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

I would appreciate any insights on why this error is occurring.

javascript json angularjs for-loop angularjs-ng-repeat

Answer 1

Answer №1

To avoid duplicate keys in your ng-repeat, consider adding track by $index. Instead of:

<option ng-repeat="item in items" value="{{item.name}}">{{item.name}}</option>

Try using:

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

You can find more detailed information in the documentation regarding this error message:

This error occurs when there are duplicate keys in an ngRepeat expression. AngularJS uses keys to link DOM nodes with items, and duplicates are not allowed.

By default, collections are keyed by reference which is suitable for most models but problematic for primitive types that share references.

Answer 2

To avoid duplicate keys in your ng-repeat, consider adding track by $index. Instead of:

<option ng-repeat="item in items" value="{{item.name}}">{{item.name}}</option>

Try using:

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

You can find more detailed information in the documentation regarding this error message:

This error occurs when there are duplicate keys in an ngRepeat expression. AngularJS uses keys to link DOM nodes with items, and duplicates are not allowed.

By default, collections are keyed by reference which is suitable for most models but problematic for primitive types that share references.

Answer 3

Answer №2

Your JSON needs to be corrected as follows:

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

Ensure you are accessing the document at the correct level by using the following code:

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

If you follow these steps, everything should work correctly. You can also check out this JSBin for reference.

Answer 4

Your JSON needs to be corrected as follows:

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

Ensure you are accessing the document at the correct level by using the following code:

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

If you follow these steps, everything should work correctly. You can also check out this JSBin for reference.

Answer 5

Answer №3

If there is a need for an additional explanation as to why this situation may arise...

In the case where you are working with a JavaScript object [] or {}

and you plan to pass it into a directive like so

<my-directive my-attribute="{{ myObject }}"></my-directive>

Within the directive, it is imperative to convert myObject back into an object using the following approach

...
controller: function( $scope ){

  $scope.links = $scope.$eval( $scope.myObject );
....

Subsequently, the HTML and ng-repeat functionality will be enabled

...
<span class="" ng-repeat="link in links">
...

ngRepeat does not have the capability to iterate over a single string.

This is how the object appears before $scope.$eval is applied

"[{ hello: 'you' }]"

and post $scope.$eval()

[{ hello: 'you' }] - representing an actual object suitable for iteration.

The error message signifies the inability to repeat over a string. Below is the error I encountered.

Error: [ngRepeat:dupes] http://errors.angularjs.org/1.3.0-beta.8/ngRepeat/dupes?p0=link%20in%20links&p1=string%3Al

Answer 6

If there is a need for an additional explanation as to why this situation may arise...

In the case where you are working with a JavaScript object [] or {}

and you plan to pass it into a directive like so

<my-directive my-attribute="{{ myObject }}"></my-directive>

Within the directive, it is imperative to convert myObject back into an object using the following approach

...
controller: function( $scope ){

  $scope.links = $scope.$eval( $scope.myObject );
....

Subsequently, the HTML and ng-repeat functionality will be enabled

...
<span class="" ng-repeat="link in links">
...

ngRepeat does not have the capability to iterate over a single string.

This is how the object appears before $scope.$eval is applied

"[{ hello: 'you' }]"

and post $scope.$eval()

[{ hello: 'you' }] - representing an actual object suitable for iteration.

The error message signifies the inability to repeat over a string. Below is the error I encountered.

Error: [ngRepeat:dupes] http://errors.angularjs.org/1.3.0-beta.8/ngRepeat/dupes?p0=link%20in%20links&p1=string%3Al

Answer 7

Answer №4

It appears that the issue lies in how your data is structured within the scope. Your JSON example indicates an object with both an entries property and a count property. However, you are placing the entire object in the scope under the name entries. To access the entries correctly, you would need to reference them as entries.entries, while the count can be accessed through entries.count. The following revised controller code may align more closely with your intended structure:

myApp.controller("MyController", ['$scope', '$http', '$log', function($scope, $http, $log){
    ...

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

Answer 8

It appears that the issue lies in how your data is structured within the scope. Your JSON example indicates an object with both an entries property and a count property. However, you are placing the entire object in the scope under the name entries. To access the entries correctly, you would need to reference them as entries.entries, while the count can be accessed through entries.count. The following revised controller code may align more closely with your intended structure:

myApp.controller("MyController", ['$scope', '$http', '$log', function($scope, $http, $log){
    ...

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

Answer 9

Answer №5

// If you wish for this Web Service to be accessible from script by using ASP.NET AJAX, simply remove the comments in the line below.

[System.Web.Script.Services.ScriptService] ==> Remove comments in this line when utilizing .NET Service

Answer 10

// If you wish for this Web Service to be accessible from script by using ASP.NET AJAX, simply remove the comments in the line below.

[System.Web.Script.Services.ScriptService] ==> Remove comments in this line when utilizing .NET Service

Answer 11

Answer №6

In ng-repeat, duplicates are not allowed. Here is an example:

    <!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="angular.js"></script>

</head>
<body>
    <div ng-app="myApp" ng-controller="personController">
        <table>
            <tr> <th>First Name</th> <th>Last Name</th> </tr>
            <tr ng-repeat="person in people track by $index">
                <td>{{person.firstName}}</td>
                <td>{{person.lastName}}</td>
                <td><input type="button" value="Select" ng-click="showDetails($index)" /></td>
            </tr>

        </table> <hr />
        <table>
            <tr ng-repeat="person1 in items track by $index">
                <td>{{person1.firstName}}</td>
                <td>{{person1.lastName}}</td>
            </tr>
        </table>
        <span>   {{sayHello()}}</span>
    </div>
    <script> var myApp = angular.module("myApp", []);
        myApp.controller("personController", ['$scope', function ($scope)
        { 
            $scope.people = [{ firstName: "F1", lastName: "L1" },
                { firstName: "F2", lastName: "L2" }, 
                { firstName: "F3", lastName: "L3" }, 
                { firstName: "F4", lastName: "L4" }, 
                { firstName: "F5", lastName: "L5" }]
            $scope.items = [];
            $scope.selectedPerson = $scope.people[0];
            $scope.showDetails = function (ind) 
            { 
                $scope.selectedPerson = $scope.people[ind];
                $scope.items.push($scope.selectedPerson);
            }
            $scope.sayHello = function ()
            {
                return $scope.items.firstName;
            }
        }]) </script>
</body>
</html>

Answer 12

In ng-repeat, duplicates are not allowed. Here is an example:

    <!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="angular.js"></script>

</head>
<body>
    <div ng-app="myApp" ng-controller="personController">
        <table>
            <tr> <th>First Name</th> <th>Last Name</th> </tr>
            <tr ng-repeat="person in people track by $index">
                <td>{{person.firstName}}</td>
                <td>{{person.lastName}}</td>
                <td><input type="button" value="Select" ng-click="showDetails($index)" /></td>
            </tr>

        </table> <hr />
        <table>
            <tr ng-repeat="person1 in items track by $index">
                <td>{{person1.firstName}}</td>
                <td>{{person1.lastName}}</td>
            </tr>
        </table>
        <span>   {{sayHello()}}</span>
    </div>
    <script> var myApp = angular.module("myApp", []);
        myApp.controller("personController", ['$scope', function ($scope)
        { 
            $scope.people = [{ firstName: "F1", lastName: "L1" },
                { firstName: "F2", lastName: "L2" }, 
                { firstName: "F3", lastName: "L3" }, 
                { firstName: "F4", lastName: "L4" }, 
                { firstName: "F5", lastName: "L5" }]
            $scope.items = [];
            $scope.selectedPerson = $scope.people[0];
            $scope.showDetails = function (ind) 
            { 
                $scope.selectedPerson = $scope.people[ind];
                $scope.items.push($scope.selectedPerson);
            }
            $scope.sayHello = function ()
            {
                return $scope.items.firstName;
            }
        }]) </script>
</body>
</html>

Repeating items must be unique; duplicates are not permitted on ng-repeat

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Guide on sending PHP array to jQuery using AJAX with JSON?

Confirming delete with jQuery and AJAX

Build a Node.js application with Express to host static files

Vue.js: crafting a universal composable is proving challenging

Sorting through an array using a different array of values

Is Threading Suitable for a For Loop in Python?

When attempting to view the PDF file, it appears completely void

What could be the reason for the error message when using rs.send with a string input?

Connects URLs to the displayed outcomes in jQuery Auto-suggest Interface

Nested arrays in the JavaScript programming language

fetching numerous JSON documents using jquery

What causes a ReactJS component to disappear upon page refresh?

Firestore javascript query is returning empty results

Disappear text gradually while scrolling horizontally

How to use AJAX script to call a non-static page method in ASP.NET

Day Change Triggers React [Native] View Update

Is iterating through object with a hasOwnProperty validation necessary?

Attempting to verify JavaScript input by utilizing OnClick and a custom function. Regardless of the content inputted, the system consistently confirms that the format is accurate

Why are the radio buttons not aligned with the text in the center?

Where is the appname saved in the Yeoman Angular generator?