Duplicates not allowed error in ng-repeat when list of objects in an array

Question

I am confused why ng-repeat is giving me duplicates error. I can solve it using track by $index but I want to know when this error is thrown by angular.

This is clear

<div ng-repeat="a in [1,1,1,1]">...</div>

As there are duplicates value in above array, it will definitely throw an Dups error.

What about list of objects

<div ng-repeat="a in items">...</div>

JS

$scope.items = [
                   {"ab":1,"bc":3},
                   {"ab":1,"bc":3}
               ]

How does angular treats/compare second one to decide whether there are duplicate values or not?

Thanks.

EDIT

Why I am not getting duplication error?

Fiddle DEMO

Above List object example not giving any error check @ jsfiddle.net/z9cGm/78 — JQuery Guru
– JQuery Guru, Commented Mar 10, 2014 at 14:40

NicolasMoise · Accepted Answer · 2014-03-10 16:08:55Z

4

See this tutorial http://www.anujgakhar.com/2013/06/15/duplicates-in-a-repeater-are-not-allowed-in-angularjs/ .

In your case, because your two objects have the same key values (ab) you get the error. Adding a track by $index might solve the problem.

EDIT

From the source code.

variable in expression track by tracking_expression` – You can also provide an optional tracking function * which can be used to associate the objects in the collection with the DOM elements. If no tracking function * is specified the ng-repeat associates elements by identity in the collection. It is an error to have * more than one tracking function to resolve to the same key. (This would mean that two distinct objects are * mapped to the same DOM element, which is not possible.) Filters should be applied to the expression, * before specifying a tracking expression.

As I understand it, two elements in the repeat resolve to the same tracking id ($$hashkey I believe) you will get the error. You should really check out their source code. It's pretty well commented and annotated.

edited Mar 10, 2014 at 16:08

answered Mar 10, 2014 at 14:02

NicolasMoise

7,27910 gold badges47 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jay Shukla Over a year ago

you are right. track by $index will solve my problem but I want to know concepts behind duplicates error thrown by angular in case of list of objects.

NicolasMoise Over a year ago

You can check out Angular's own source for ng-repeat github.com/angular/angular.js/blob/master/src/ng/directive/…. The error is thrown around line 310.

Jay Shukla Over a year ago

Now check, I made a fiddle. if you can help me to clear my concepts.

NicolasMoise Over a year ago

If you use Batarang you can see the id's created by ng-repeat

Mehdi Dehghani · Accepted Answer · 2017-07-11 04:44:54Z

3

In angular for each object Means(JSON,object hasOwnProperty), angular maintaining unique ID that $$hashKey used for tracking each object and bind it with DOM element, so as for below case :

$scope.items = [
                   {"ab" : 1", "bc" : 3},
                   {"ab" : 1, "bc" : 3}
               ]

While Angular is not maintenance unique ID for Simple Array

$scope.simpleArrray=[1, 1, 1, 1];

In ng-repeat angularJS maintains Hash for each item Iterate and check for uniqueness for JSON object or Array, if Duplicate ID found in case of simple array it raise an error, for any JSON object its added Unique ID if not found, so you are not getting duplicate error in JSON object

Hope i have clarified your doubts

function AController($scope) {
    var a = {"ab" : 1, "bc" :3}
    var b = a;
    $scope.objsInObj = [
                   a,
                   b
               ]    
}

In above case, in ng-repeat when object a in Iteration angular adds $$hashKey to a, when b in iteration it which is pointing to a, which already Has $$hashkey, so angular will not add new $$hashkey and return a's Hashkey so it will be Duplicate, so Angular Raise duplicate Error

edited Jul 11, 2017 at 4:44

Mehdi Dehghani

11.7k6 gold badges64 silver badges68 bronze badges

answered Mar 10, 2014 at 15:03

JQuery Guru

6,9631 gold badge35 silver badges40 bronze badges

2 Comments

Jay Shukla Over a year ago

Still not clear what you are talking about. My simple question is why I am not getting error of duplication. According to what I understood, I should get an error.

Mehdi Dehghani Over a year ago

Very nice answer, for who working with JSON and get the ng-repeat dups error and didn't find this answer useful, I suggest read the answer again.

Jay Shukla · Accepted Answer · 2014-03-10 15:28:39Z

0

Finally I clear concepts myself.

Angular checks weather reference of the object is same or not. So however in my case there are two objects which is same but both are pointing to different reference so its not giving duplicate error. See updated fiddle.

function AController($scope) {
    var a = {"ab":1,"bc":3}
    var b = a;
    $scope.objsInObj = [
                   a,
                   b
               ]

}

DEMO

answered Mar 10, 2014 at 15:28

Jay Shukla

5,8368 gold badges35 silver badges65 bronze badges

1 Comment

JQuery Guru Over a year ago

In above case, in ng-repeat when object "a" in Iteration angular adds $$hashKey to "a", when "b" in iteration it which is pointing to "a", which already Has $$hashkey, so angular will not add new $$hashkey and return "a's" Hashkey so it will be Duplicate, so Angular Raise duplicate Error

Collectives™ on Stack Overflow

Duplicates not allowed error in ng-repeat when list of objects in an array

3 Answers 3

4 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related