또 다른 AngularJS 오류 : ngRepeat : dupes

Question

나는 Angular로 놀고 다른 문제를 발견했습니다. 외부 js 파일에서 데이터를 가져 오려고하는데 '오류 : ngRepeat : dupes'오류가 발생했습니다.

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

그래서 오류 메시지에 제공된 방향에 따라, 나는 내 데이터가 나타났다

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

'에 의해 트랙'을 추가했지만 지금은 하나 개의 항목 만 여러 번 반복한다.

전체 코드는 this link을 확인하십시오.

내가 잘못 했나요? 나는 분명히 의미한다. 그러나 내가 뭘 잘못하고있는 걸까?

감사합니다.

Answer 1

각도가 문제가되지 않습니다 여기에 참조하시기 바랍니다.

script.js에서 생성 된 후 console.log($scope.productsList);을 추가하면 내 뜻을 알 수 있습니다.

귀하의 문제가

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

당신이 thisProduct

이 추가 재설정되지 않습니다이 라인 아래 아래 thisProduct = {};

Answer 2

귀하의 productsList에 동일한 개체가 포함되어 있기 때문입니다.

[{"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}] 

Answer 3

당신이 그것을 제공하는 배열을 표시 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); 
         } 
        } 
       }