How to avoid duplicate values in ng-repeat?
Original blog entry http://techknowblogs.blogspot.in/2015/05/angularjs-weirdness-with-ng-repeat.html If you try googling the first thing about AngularJS what google throws is :
well well.. "Superheroic" that means all around awesomeness and little bit of weirdness we all come to love about other superheroes. Today I am going to talk about one of those weirdnesses which drove me wild for couple of hours. I am talking about ng-repeat directive and duplicate elements in arraysSo what is ng-repeat? If you follow the official docs it would explain much better than me but in short its a directive which helps you iterating over a collection and play with properties of contained objects in the collection.
What it will do is simply go over "items" collection and pick each "item" object and display any property in the object.Suppose your collection looks like this:
So your "items" is going be the array and "item" , needless to say is JSON object(s) in the array.All straightforward, it will nicely render the emails.Okay now lets add one duplicate element as followed
So lets add some elements into an array:
And put some HTML to display the items:
So what do you expect? some error as per the documentation, no? But it gets displayed elegantlyYou can see the detailed code http://plnkr.co/edit/M15okeZzVDt7YWWL0YI9?p=previewOkay confusing right? at least it was to me. So lets test with something else:
Change the HTML little bit:
You can see the detailed code http://plnkr.co/edit/q3oPCrW3RepxvWSZ1LB1?p=previewBoom!!!! Nothing appears !Take a look at consoleError: [ngRepeat:dupes] http://errors.angularjs.org/1.3.15/ngRepeat/dupes?p0=item%20in%20items&p1=string%3Aa%40gmail.com&p2=a%40gmail.comGo to the link. You will see following:
Occurs if there are duplicate keys in an ngRepeat expression. Duplicate keys are banned because AngularJS uses keys to associate DOM nodes with items.By default, collections are keyed by reference which is desirable for most common models but can be problematic for primitive types that are interned (share references).For example the issue can be triggered by this invalid code:
To resolve this error either ensure that the items in the collection have unique identity or use the track by syntax to specify how to track the association between models and DOM.The example above can be resolved by using track by $index, which will cause the items to be keyed by their position in the array instead of their value:
Okay the most important part to understand from the above documentation is this:"By default, collections are keyed by reference which is desirable for most common models but can be problematic for primitive types that are interned (share references)."Well now we now why it was okay in the first example when we were using objects and not okay in the second example when we were using strings; its shared referencesTwo objects in our case both containing same data of { id:1, email:a@b.com} are two different objects. They do not share reference.But in the second case both "a@gmail.com" entries share the reference.
Down to basics javascript has two equality operators : "==" for equal and "===" for identitySo as long as array elements have separate references its all fine even if they are equalI will end with one more important detail which might get missed. This particular check is not there in Angular 1.0.xSo if you are using any Angular 1.0.x version chances are you would not see this error. This was introduced in Angular 1.1.x most probably in 1.1.4. I used probably as I could not find the official doc that says "Since release #" in line with Java doc :).You can see it working without any fuss http://plnkr.co/edit/qrOez7aZ7X1jsOrmkfiP?p=preview with 1.0.8 version. You might even change the Angular version to confirm the release it was introduced in.
Approach:
Example 1: In this example, the character ‘g’ and ‘b’ are removed from the original array.
Output:
Example 2: This example does the case-sensitive comparison, so the elements like ‘gfg’ and ‘GFG’ will not be considered as duplicates.
Output:
- Select the range of cells, or ensure that the active cell is in a table.
- On the Data tab, click Remove Duplicates .
- In the Remove Duplicates dialog box, unselect any columns where you don't want to remove duplicate values.
Related Questions
- How to play system audio in google meet?
- How to login bgmi with email?
- How to get help from cm relief fund?
- How to take rrsp out?
- How to differentiate mod x?
- How to dance in a ballroom?
- How to open ooze dab pen?
- How to permanently cure premature ejaculation?
- How to name range vba?
- How to create job in autosys?
