AngularJS ngRepeat:dupes

Question

(Using AngularJS)

I'm learning AngularJS and attempting a simple checkout system. I have 2 columns, on the left I have items, and on the right I have a basket(cart). Essentially you can add items from the left and they appear in the right basket.

The problem is, when you add an item to the basket that already exists, I get ngRepeat: dupes error in the console. I have handled functionality to increase the quantity for this but it prevent any further items from showing in the basket.

So ideally, I'd like to ignore the ng:repeat dupes error and continue adding items to the basket.

Here is a snippet of the basket;

<div ng:repeat='merchandise in merchandiseCtrl.basket' class='row'>
  <div class='col-sm-3'>{{ merchandise.name }}</div>
    <div class='col-sm-3'>
       <input type='text' class='form-control input-sm'  value='{{ merchandise.quantity }}' ng-model=' merchandise.quantity'>
    </div>
  <div class='col-sm-3'>{{ merchandise.price }}</div>
     <div class='col-sm-3 '>
       <button ng-click='merchandiseCtrl.removeItem(merchandise)' type='button' class='btn btn-link btn-xs'>
        <span class='glyphicon glyphicon-trash'> </span>
       </button>
     </div>
     <hr>
 </div>

If I haven't explain clearly what I require or you require more code, please comment.

Example (Hopefully to clear any misunderstanding):

I hope this is more clear. Say you have a shirt already in your cart, and you would then like to add one more shirt (this works fine and I have functionality which adds 1 to the quantity) however, this errors ng:repeat dupes in the browser console window. Then when I attemp to add a Sweatshirt to the basket, the content in the basket will not be updated

possible duplicate http://stackoverflow.com/questions/16296670/angular-ng-repeat-error-duplicates-in-a-repeater-are-not-allowed — ste2425, Mar 15 '16 at 14:17
@ojuskulkarni thanks for that out. I have fixed that issue (for some reason it worked without, but again, thanks) — japes Sophey, Mar 15 '16 at 14:25
Can you please mark you question as answered by adding a answer and marking it answered. You have not given the code related to adding things in basket. You should have given that. — Thanigainathan, Mar 15 '16 at 14:30
@Thanigainathan If i knew the answer, I would mark it as answered! — japes Sophey, Mar 15 '16 at 14:32
Yes, read my post and don't make assumptions! 'track by' may be the correct solution, but it as not fixed my problem. I asked Asfandiyar to explain his answer, as $index is not recognised. — japes Sophey, Mar 15 '16 at 14:38

score 1 · Answer 1 · answered Mar 15 '16 at 14:17

1

I'm not sure if I correctly understood your problem, but try to add "track by $index" in your ng-repeat

answered Mar 15 '16 at 14:17

Hyukchan Kwon

382
1
5
20

Don't mean to sound like an arse but answers should explain why too. otherwise the OP is non the wiser as to the actual issue. – ste2425 Mar 15 '16 at 14:18
Sorry, here is some documentation : https://docs.angularjs.org/error/ngRepeat/dupes The thing is that I wasn't sure to have correctly understood the problem with all the quantity thing ... – Hyukchan Kwon Mar 15 '16 at 14:19
I hope this is more clear. Say you have a shirt already in your cart, and you would then like to add one more shirt (this works fine and I have functionality which adds 1 to the quantity) however, this errors ng:repeat dupes in the browser console window. Then when I attemp to add a Sweatshirt to the basket, the content in the basket will not be updated. – japes Sophey Mar 15 '16 at 14:21

score 1 · Answer 2 · answered Mar 15 '16 at 14:21

1

use track by $index inside ng-repeat like

<div ng-repeat="item in items track by $index">

answered Mar 15 '16 at 14:21

Asfandiyar Khan

84
8

Could you please explain what this is doing, and that $index is referencing or do I need to reference a field on my model? – japes Sophey Mar 15 '16 at 14:28
@CottonSocksBro All `ngRepeats` generate variables that can be used inside the repeat. `$index` is the current index that is being looped over. What `track by` is doing is in a nutshell saying 'don't track by this elements value as there are duplicates but by this elements index'. It can also be used to track by an elements property if iterating an array of objects. – ste2425 Mar 15 '16 at 14:46
I have identifier on my model e.g. merchandise in merchandiseCtrl.basket track by merchandise.id ... but this does not work. – japes Sophey Mar 15 '16 at 14:46
@ste2425 thanks for the input. $index is causing problems with my page (probably) becuase this is a php file. Is there a way to make angular read this? – japes Sophey Mar 15 '16 at 14:53

score 0 · Answer 3 · edited Jan 22 '18 at 01:16

0

I was getting this error when there was duplicate $hashKey JSON object.

edited Jan 22 '18 at 01:16

Stephen Rauch

47,830
31
106
135

answered Jan 22 '18 at 00:49

shashank

1
1

AngularJS ngRepeat:dupes

3 Answers3