Javascript .push causing array to nest deeper and deeper

Question

I'm sure this is an easy one, however my searches haven't helped as of yet.

When I push an array into another array, they nest a level deeper. The first array is at the correct depth.

var productArray = [{productID: currentProduct, productPrice: currentPrice, productName: productName, options: myOptions}];

if(localStorage.getItem("cart")){
    var existingArray = JSON.parse(localStorage.getItem("cart"));
    existingArray.push(productArray);
    localStorage.setItem("cart", JSON.stringify(existingArray));
} else {
    localStorage.setItem("cart", JSON.stringify(productArray));
}

Result:

0: Object { productID: "1", productPrice: "2.00", productName: "Chicken Sandwich", … }

1: 0: Object { productID: "1", productPrice: "2.00", productName: "Chicken Sandwich", … }

2: 0: Object { productID: "1", productPrice: "2.00", productName: "Chicken Sandwich", … }

That's what's *supposed* to happen, why did you expect otherwise? — jonrsharpe, Apr 22 '19 at 14:22
Rather than `push`ing the array into the other, you should be concatenating (using [`concat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat) or [`...`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax), for example). — Tyler Roper, Apr 22 '19 at 14:22
@jonrsharpe From the 2nd array onwards, the array is 1 level deeper. — M_Becker, Apr 22 '19 at 14:23
`existingArray.push(...productArray)` or for internet exploder, `existingArray.push.apply(existingArray, productArray)` — Jaromanda X, Apr 22 '19 at 14:23
@TylerRoper I will try ..., concat is not working. It is not throwing any errors, however the new array does not get merged. — M_Becker, Apr 22 '19 at 14:25
@M_Becker `concat` does not modify either of the arrays; it returns a *new* array. You'd likely want to store that as a new variable, ie `var newArray = array1.concat(array2)`, where `newArray` is the merged result of `array1` and `array2`. — Tyler Roper, Apr 22 '19 at 14:26
@TylerRoper ... worked. I learnt something new today, thank you! Would you like to submit it as an answer so I can mark it as resolved? — M_Becker, Apr 22 '19 at 14:27
@M_Becker I appreciate it - glad I could help. I believe this question likely falls under a handful of potential duplicates, so perhaps you can accept one of the suggested dupes and point future readers there instead :) — Tyler Roper, Apr 22 '19 at 14:28

score 0 · Answer 1 · answered Apr 22 '19 at 14:28

You have multiple options to concatenate two arrays, but .push is not it (unless you iterate the 2nd array and push each element individually, OR followup with .flat())

let array = [1, 2, 3];

array.push([4, 5, 6]);
console.log(array); // [1, 2, 3, [4, 5, 6]]

array = array.concat([7, 8, 9]);
console.log(array); // [1, 2, 3, [4, 5, 6], 7, 8, 9]

array = [...array, ...[10, 11, 12]];
console.log(array); // [1, 2, 3, [4, 5, 6], 7, 8, 9, 10, 11, 12]

array.push(13, 14, 15);
array = array.flat();
console.log(array); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]

Hey Junvar. In the future, consider marking duplicates rather than answering them. Submitting answers to questions that have already been asked a whole lot tends to clutter up the site with repeated information, and encourages users to ask repeat questions :) — Tyler Roper, Apr 22 '19 at 14:29

score 0 · Answer 2 · answered Apr 22 '19 at 14:28

Because productArray is an array, and not an object, pushing it into another array will create another array, which will contain both, the initial array, and the new one.

To do what you were expecting, you should declare a new object, and push it into the existing array.

var productObject = {productID: 1, productPrice: 1, productName: '', options:{}};
var productArray = [];
if(localStorage.getItem("cart")){
    var existingArray = JSON.parse(localStorage.getItem("cart"));
    existingArray.push(productObject );
    localStorage.setItem("cart", JSON.stringify(existingArray));
} else {
    productArray.push(productObject);
    localStorage.setItem("cart", JSON.stringify(productArray));
}

score 0 · Answer 3 · answered Apr 22 '19 at 14:29

I think you are adding the entire "productArray" in the position n of your "existingArray". Try to make this.

var productArray = [{productID: currentProduct, productPrice: currentPrice, productName: productName, options: myOptions}];

if(localStorage.getItem("cart")){
    var existingArray = JSON.parse(localStorage.getItem("cart"));
    productArray.forEach(function(val){
     existingArray.push(val);
    })
    localStorage.setItem("cart", JSON.stringify(existingArray));
} else {
    localStorage.setItem("cart", JSON.stringify(productArray));
}

Javascript .push causing array to nest deeper and deeper

3 Answers3