Assigning array inside object in Javascript

Question

I have cart and products global variable.

Products can have multiple attributes.

Here is a code

var products = [
                  {
                    name: 'Table',
                    price: 200,
                    attributes: [
                                  {
                                    name: 'Height',
                                    type: 'text',
                                    default_value: '',
                                  },
                                  {
                                    name: 'Width',
                                    type: 'text',
                                    default_value: '',
                                  }
                                ],
                  },
                  {
                    name: 'Chair',
                    price: 150,
                    attributes: [
                                  {
                                    name: 'Height',
                                    type: 'text',
                                    default_value: '',
                                  },
                                  {
                                    name: 'Width',
                                    type: 'text',
                                    default_value: '',
                                  },
                                  {
                                    name: 'Company',
                                    type: 'text',
                                    default_value: ''
                                  }
                                ],
                  }
              ];

var cart = {
  products: [],
};

//console.log('Initial cart',cart);

//add product to cart
let p = Object.assign({},products[0]);
cart.products.push(p);

//console.log('First cart', cart);
//change price
cart.products[0].price = 20;
//console.log('products',products);
//console.log('second cart',cart);

//change attribute of product
cart.products[0].attributes[0].value = 5;

This code changes global products value attributes instead of cart attributes.

Please help me to solve this issue.

If you can use lodash, try lodash.cloneDeep. you are copying only the keys, and each none primitive value (e.g object) is passed by pointer (and not cloned). clone deep is one option, another option, which also do the job p = JSON.parse(JSON.stringify(products[0])) — Daniel Krom
– Daniel Krom, Commented Jun 20, 2018 at 12:24

Muhammad Usman · Accepted Answer · 2018-06-20 12:30:37Z

1

From MDN

Object.assign() copies property values. If the source value is a reference to an object, it only copies that reference value.

And as products[0] is an object in your data that's why you are facing this shallow copy issue

Instead you can use

let p = JSON.parse(JSON.stringify(products[0]));

var products = [{
        name: 'Table',
        price: 200,
        attributes: [{
                name: 'Height',
                type: 'text',
                default_value: '',
            },
            {
                name: 'Width',
                type: 'text',
                default_value: '',
            }
        ],
    },
    {
        name: 'Chair',
        price: 150,
        attributes: [{
                name: 'Height',
                type: 'text',
                default_value: '',
            },
            {
                name: 'Width',
                type: 'text',
                default_value: '',
            },
            {
                name: 'Company',
                type: 'text',
                default_value: ''
            }
        ],
    }
];

var cart = {
    products: [],
};

//console.log('Initial cart',cart);

//add product to cart
let p = JSON.parse(JSON.stringify(products[0]));
 
cart.products.push(p);

//console.log('First cart', cart);
//change price
cart.products[0].price = 20;
console.log('products',products);
console.log('second cart',cart);

edited Jun 20, 2018 at 12:30

answered Jun 20, 2018 at 12:18

Muhammad Usman

10.1k26 silver badges41 bronze badges

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

1 Comment

Jatin Raikwar Over a year ago

Then what should I do? @GeorgeBailey

libik · Accepted Answer · 2018-06-20 12:28:26Z

0

You create only shallow copy with Object.assign, which leads to accessing the same objects in a memory through copied reference.

If I need to modify object that is passed by reference or is global and I dont want to mutate it for all other functions/parts of the code, I use this: https://lodash.com/docs/4.17.10#cloneDeep

let p = _.cloneDeep(products[0]);

answered Jun 20, 2018 at 12:28

libik

23.1k10 gold badges52 silver badges94 bronze badges

Collectives™ on Stack Overflow

Assigning array inside object in Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related