using push function in angular js

Question

i am trying to make a eCommerce shop with angular and code is as follow

var shopApp = angular.module('shopApp', ["slugifier"], function() {});

   controllers.productController = function($scope,FetchFactory) {

     $scope.fetchProducts = function(offset) {
        FetchFactory.items.fetchItems(offset).then(function(data){
        $scope.products = data;
    });
  }
  var activeAttrValue = 0;
  var activeAttrUnit = 0;
  var activeAttrId = 0;
   $scope.add_to_cart() = function(index){
        var newProd = [];
        newProd = $scope.products[index]; // $scope.products have products json
        newProd.quantity = 1;
        newProd.attr_id = activeAttrId;
        newProd.attr_value = activeAttrValue;
        newProd.attr_unit = activeAttrUnit;
        $scope.cartProducts.itemlist.push(newProd);
        $scope.cartProducts.total_items++;
        $scope.cartProducts.total_price += parseInt(newProd.price);
   }
 }
 shopApp.controller(controllers);

i have a made a factory which will return me products json after a ajax request and using ng-repeat as "product in products" i am displaying all the products in my html and i have make a shopping cart where the products that are added to cart are being displayed by ng-repeat of "cartProduct in cartProducts.itemlist track by $index" products have attributes like color,size,weight etc. whenever a attribute is clicked its value(like weight) and unit(kg) are store in a global variables activeAttrValue,activeAttrUnit and if add to cart is clicked they are stored in cartProducts.

Problem: In case of multiple attributes. when one attribute is selected added to cart, and again another attribute of same product is selected and added to cart.ideally they should add to cart as two products but instead last added product and attributes only adds and in console gives a error

 Error: [ngRepeat:dupes] http://errors.angularjs.org/1.2.16/ngRepeat/dupes?p0=cartProduct%20in%20cartProducts.itemlist&p1=object%3A006

when i tried console.log($scope.cartProducts.itemlist); i got this

 Object
   $$hashKey: "005"
   attr_id: "3"
   attr_unit: ""
   attr_value: "blue"
  , 
  Object
   $$hashKey: "005"
   attr_id: "3"
   attr_unit: ""
   attr_value: "blue"

attributes of both products changed to same

I hope i am clear with my problem.

Possible duplicate of stackoverflow.com/questions/26152576/… and many more i am sure.. You should try search with the error ngRepeat:dupes — PSL
– PSL, Commented Oct 3, 2014 at 15:41
Are you trying to push the same item to the array? How about if you do newProd = angular.clone($scope.products[index]); In the previous answer posted has information on why you might be seeing this issue. angular.clone should remove $$hashKey. Anyways if it same item being pushed into the cart why dont you associate a counter for item, instead of pushing the same object. — PSL
– PSL, Commented Oct 3, 2014 at 15:45
yes same item but with different selected attribute it worked fine when i tried adding like this 1.product-A with a attribute-1 2.product-B without any attribute 3.product-A with a attribute-2 — Sri Kanth
– Sri Kanth, Commented Oct 3, 2014 at 15:46
its something like i select a blue tee and add to cart .. it has black too.. so i select black and add to the cart. but i find two black tees are added — Sri Kanth
– Sri Kanth, Commented Oct 3, 2014 at 15:52
That is because you are using same object reference. Use angular.clone. Did you check my comment earlier? — PSL
– PSL, Commented Oct 3, 2014 at 15:54

marian2js · Accepted Answer · 2014-10-03 14:47:08Z

3

Angular for default does not allow duplicated elements on ng-repeat. In order to fix this, you need to add a "track by" in your ng-repeat directive.

For example for a list of numbers with duplicated elements:

<div ng-repeat="value in [1, 1, 1, 2, 2] track by $index"></div>

For more info check the url of your error

answered Oct 3, 2014 at 14:47

marian2js

8191 gold badge9 silver badges10 bronze badges

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

Comments

gorpacrate · Accepted Answer · 2014-10-03 14:46:58Z

2

Try ng-repeat="cartProduct in cartProducts.itemlist track by $index".

answered Oct 3, 2014 at 14:46

gorpacrate

5,7013 gold badges23 silver badges18 bronze badges

1 Comment

Sri Kanth Over a year ago

have tried that!! when i tried console.log($scope.cartProducts.itemlist), it shows as two products but attribute of both the products become the last attribute that was selected.

Collectives™ on Stack Overflow

using push function in angular js

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related