CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
crea8ive_mind
crea8ive_mind

Reputation: 53

Yet another AngularJS Error: ngRepeat:dupes

I am playing around with Angular and I have stumbled on another issue. I am trying to pull data from an external js file and I received the 'Error: ngRepeat:dupes' error.

<div class="productRow" ng-repeat="prod in productsList">

So following the direction provided in the error message, I added 'track by'

<div class="productRow" ng-repeat="prod in productsList track by $index">

My data appeared, but now it is only repeating one item multiple times.

Please check out this link for full code.

Am I doing something wrong? I mean obviously I am, but what I am doing wrong?

Thanks!

Upvotes: 1

Views: 349

Answers (3)

Narek Mamikonyan
Narek Mamikonyan

Reputation: 4611

That's because of your productsList is containing same objects. 

[{"prodIdxId":207,"skuId":477072,"title":"Allergy Liquid Cherry Flavored","size":"4 OZ","price":5.99,"discount_price":0,"discount_msg":"","ship_save":1,"free_shipping":1,"weight":"0.06 LBS","rating":0,"img":"5042813846.jpg","out_of_stock":0,"qty":3},{"prodIdxId":207,"skuId":477072,"title":"Allergy Liquid Cherry Flavored","size":"4 OZ","price":5.99,"discount_price":0,"discount_msg":"","ship_save":1,"free_shipping":1,"weight":"0.06 LBS","rating":0,"img":"5042813846.jpg","out_of_stock":0,"qty":3},{"prodIdxId":207,"skuId":477072,"title":"Allergy Liquid Cherry Flavored","size":"4 OZ","price":5.99,"discount_price":0,"discount_msg":"","ship_save":1,"free_shipping":1,"weight":"0.06 LBS","rating":0,"img":"5042813846.jpg","out_of_stock":0,"qty":3},{"prodIdxId":207,"skuId":477072,"title":"Allergy Liquid Cherry Flavored","size":"4 OZ","price":5.99,"discount_price":0,"discount_msg":"","ship_save":1,"free_shipping":1,"weight":"0.06 LBS","rating":0,"img":"5042813846.jpg","out_of_stock":0,"qty":3},{"prodIdxId":207,"skuId":477072,"title":"Allergy Liquid Cherry Flavored","size":"4 OZ","price":5.99,"discount_price":0,"discount_msg":"","ship_save":1,"free_shipping":1,"weight":"0.06 LBS","rating":0,"img":"5042813846.jpg","out_of_stock":0,"qty":3},{"prodIdxId":207,"skuId":477072,"title":"Allergy Liquid Cherry Flavored","size":"4 OZ","price":5.99,"discount_price":0,"discount_msg":"","ship_save":1,"free_shipping":1,"weight":"0.06 LBS","rating":0,"img":"5042813846.jpg","out_of_stock":0,"qty":3},{"prodIdxId":207,"skuId":477072,"title":"Allergy Liquid Cherry Flavored","size":"4 OZ","price":5.99,"discount_price":0,"discount_msg":"","ship_save":1,"free_shipping":1,"weight":"0.06 LBS","rating":0,"img":"5042813846.jpg","out_of_stock":0,"qty":3},{"prodIdxId":207,"skuId":477072,"title":"Allergy Liquid Cherry Flavored","size":"4 OZ","price":5.99,"discount_price":0,"discount_msg":"","ship_save":1,"free_shipping":1,"weight":"0.06 LBS","rating":0,"img":"5042813846.jpg","out_of_stock":0,"qty":3}]
{"prodIdxId":207,"skuId":477072,"title":"Allergy Liquid Cherry Flavored","size":"4 OZ","price":5.99,"discount_price":0,"discount_msg":"","ship_save":1,"free_shipping":1,"weight":"0.06 LBS","rating":0,"img":"5042813846.jpg","out_of_stock":0,"qty":3}]

Upvotes: 0

GillesC
GillesC

Reputation: 10874

Angular is not the issue, it displays the arrays you provided it with.

In script.js if you add console.log($scope.productsList); after it's generated you'll see what I mean.

Your problem is under this line

if (productItems[ii] == products[jj].id)

you are not resetting thisProduct

Add this underneath thisProduct = {};

Upvotes: 2

sylwester
sylwester

Reputation: 16498

Please see here http://plnkr.co/edit/bj0NWJnjgNUbHcFX1Wvw?p=preview 

  for (var ii = 0; ii < productItems.length; ii++) {
                    for (var jj = 0; jj < products.length; jj++) {
                        if (productItems[ii] == products[jj].id) {
 //add this line to your code
                          thisProduct = {};
                            thisProduct.prodIdxId = products[jj].id;
                            thisProduct.skuId = products[jj].skuId;
                            thisProduct.title = products[jj].title;
                            thisProduct.size = products[jj].size;
                            thisProduct.price = products[jj].price;
                            thisProduct.discount_price = products[jj].disc_price;
                            thisProduct.discount_msg = products[jj].discount_msg;
                            thisProduct.ship_save = products[jj].ship_save;
                            thisProduct.free_shipping = products[jj].free_shipping;
                            thisProduct.weight = products[jj].weight;
                            thisProduct.rating = products[jj].rating;
                            thisProduct.img = products[jj].img;
                            thisProduct.out_of_stock = products[jj].oos;
                            thisProduct.qty = products[jj].qty;
                            console.log(thisProduct);

                            $scope.productsList.push(thisProduct);

                            console.log($scope.productsList);
                        }
                    }
                }

Upvotes: 0

Related Questions