JavaScript Object add-key值，Same方法，结果不同

Question

thanx for read me. Excuse my english and my question maybe stupid. I'm setting up a cart for a e-shop. I'm trying to catch data from products displayed for create a orderlist. The cart is an object with 3 equals methods for add quantity, name and price. But only one work. Two others overwrite data.

Datas that i want to stock are strings.

var Cart = function () {

    this.cartListQte = {}

    this.products_names = {}

    this.products_prices = {}

}

//class

Cart.prototype = {

    //properties

    'cartListQte': {},

    'products_names': {},

    'products_prices': {},

    //methods

        //setter getter

    setCartListQte: function (cartListQte) {

        this.cartListQte = cartListQte;

    },

    getCartListQte: function () {

        return this.cartListQte;

    },

    setProducts_names: function (products_names) {

        this.products_names = products_names;

    },

    getProducts_names: function () {

        return this.products_names;

    },

    setProducts_prices: function (products_prices) {

        this.products_prices = products_prices;

    },

    getProducts_prices: function () {

        return this.products_prices;

    },

        //"push" new product

    pushed: function (productId,Qty){

        this.cartListQte[parseInt(productId)]= parseInt(Qty);

    },


    pushName: function (productId,nm){

        this.products_names[parseInt(productId)]= nm;

    },


    pushPrice: function (productId,prx){

        this.products_prices[parseInt(productId)]= parseInt(prx);

    }

}

//gestion du panier

function addProductToCart (event) {

//nouveau panier

var cart = new Cart;

    //on récupère le panier déjà enregisté

var curentCart = JSON.parse(localStorage.getItem('panier'));

    //si il existe, on le manipule

if(curentCart != null){

    cart.cartListQte = curentCart.cartListQte;

}

//récupération des nouvelles données à enregistrer

var id = $(this).attr('productid');

var quantity = $("[productIdQte="+id+"]").val();

console.log(quantity);

var name = String($(".name"+id).text());

console.log(name);

var price = $(".price"+id).text();

console.log(parseInt(price));

    //poussées dans le tableau

if(quantity>0){

    /* exemple who don't work too

    var quantity = "1";

    var name = "a";

    var price = "1" ;

    */
    cart.pushed(id, quantity);

    cart.pushName(id, name);

    cart.pushPrice(id, price);

    //écrasement des données dans le local

    localStorage.setItem('panier', JSON.stringify(cart));

    console.log(cart.cartListQte); 

}

I expect the output of

cart {

  cartListQte: Object { 5: 4, 6: 3 }

  products_names: Object { 5: "toto", 6: "titi" }

  products_prices: Object { 5: 100, 6: 150 }

}

but the actual output is

cart {

  cartListQte: Object { 5: 4, 6: 3 }

  products_names: Object { 6: "titi" }

  products_prices: Object { 6: 150 }

}

Answer 1

The problem is that you are replacing content in objects.

setProducts_names: function (products_names) {
    this.products_names = products_names;
    // all names are replaced with one actuall setting
},

so the code needs to be updated with three-dot operator which copies all attributes within the previously stored object

setProducts_names: function (products_names) {
    this.products_names = {...this.products_names,...products_names}; 
    // products_names will be merged
},

This needst o be added to every set... method

Answer 2

There you go, this should do the trick. You forgot to update the 2 other arrays.

 if(curentCart != null){ cart.cartListQte = curentCart.cartListQte; cart.products_names = curentCart.products_names; cart.products_prices = curentCart.products_prices; }