How to push an object to another in react?

Question

Here is what i use to assign one object into another

var check = Object.assign(product, cart_item);

But it does not added as key in object ie (var check)

See the image below

Please share your thoughts on this, how do I add it as another key like the 0,1,2 keys in image.

code:-

var product = {
        brand: data.product.brandName,
        category: category,
        country: 'IN',
        email: Cookies.get('useremail'),
        imageUrl: data.product.media.thumbnails["0"].src,
        location: 'product page',
        magento_product_id: data.product.productKey,
        manufacturer: 'Widow',
        microcategory: 'Printed Leggings',
        name: data.product.name,
        price: data.product.price.price.value,
        product_id: data.product.productKey,
        products:cart_item,
        quantity: 1,
        regular_price: data.product.price.price.value,
        size: '',
        size_type: data.selectedVariant.label,
        special_category: 'Brands,Char Test Category,Widow,Widow',
        special_price: data.product.price.specialPrice,
        stock_quantity: data.selectedVariant.totalQuantity,
        swatch: data.selectedVariant.color,
        trend: 'WID Darkest Hour 2020',
        type: data.product.type,
        url: data.product.url
    };
    

    data.session.cart.items.forEach(function (properties) {
        var items = {};
        items["brand"] = properties.product.display_brand;
        items["category"] = "";
        items["country"]= "IN";
        items["imageUrl"]=properties.product.image.url;
        items["magento_product_id"]=properties.product.id;
        items["manufacturer"]="";
        items["microcategory"]="";
        items["name"]=properties.product.name;
        items["price"]=properties.product.price_range.minimum_price.final_price.value;
        items["product_id"]=properties.id;
        items["quantity"]=properties.quantity;
        items["regular_price"]=properties.product.price_range.minimum_price.regular_price.value;
        items["size"]=properties.product.size;
        items["size_type"]=properties.product.size_label;
        items["special_category"]="";
        items["special_price"]=properties.product.special_price;
        items["stock_quantity"]="";
        items["swatch"]=properties.product.color_label;
        items["trend"]="";
        items["type"]=properties.product.__typename;
        items["url"]=properties.url;
        cart_item.push(items)
    });
        var check = Object.assign(product, cart_item);
        console.log(check);

Expected output: Thank you

Answer 1

The point of Object.assign is to merge the properties of objects.

 const first = { first: 1, first_2: 2 }; const second = { second: 3, second_2: 4 }; const result = Object.assign(first, second); console.log(result);

If you want to add a new property to an object, then you need to do so explicitly:

 const first = { first: 1, first_2: 2 }; const second = { second: 3, second_2: 4 }; const result = { "0": first }; result["1"] = second; console.log(result);

… but if you want a sequential list of numbered objects, then you should be organising them in an array and not building your own object in the first place.

 const first = { first: 1, first_2: 2 }; const second = { second: 3, second_2: 4 }; const result = [ first ]; result.push(second); console.log(result);

Answer 2

You are merging an array with an object in your Object.assign() call which will create a key: value pair for each element in the array using the integer index as the key and the element at that index for the value.

 const product = { first: 1, second: 2 }; const cart_item = ['one', 'two', 'three']; const check = Object.assign(product, cart_item); console.log(check);

Or, in the case of Quentin's example...

 const objects = [{ first: 1, first_2: 2 }, { second: 3, second_2: 4 }]; const result = Object.assign({}, objects); console.log(result); // { '0': { first: 1, first_2: 2 }, '1': { second: 3, second_2: 4 } } console.log(objects) // [ { first: 1, first_2: 2 }, { second: 3, second_2: 4 } ] // (the array is unaltered)