Join two arrays in javascript where a matching index is found

Question

I have two separate arrays that are passed via AJAX. The first is called cartArray and contains data related to a product being added to cart, and console.log shows it contains this.

max_allowed: 10
product_id: 4202
product_name: "34 inch Gold Number 1 Foil Balloon (1)"
qty: 3

The second is called cartqtyArray and is a count of what current cart quantity is before the add to cart action takes place. console.log shows it contains this.

0: {product_id: 4202, basket_qty: 2}
1: {product_id: 4203, basket_qty: 10}
2: {product_id: 0, basket_qty: 0}
3: {product_id: 0, basket_qty: 0}
4: {product_id: 0, basket_qty: 0}
5: {product_id: 0, basket_qty: 0}
6: {product_id: 0, basket_qty: 0}
7: {product_id: 0, basket_qty: 0}
8: {product_id: 0, basket_qty: 0}
9: {product_id: 0, basket_qty: 0}
10: {product_id: 0, basket_qty: 0}

What I need to do is combine the two arrays, matching the product_id if it exists in cartArray. Any where there isn't a matching product_id can be discarded.

So ultimately I would end up with a new array like

max_allowed: 10
product_id: 4202
product_name: "34 inch Gold Number 1 Foil Balloon (1)"
qty: 3
basket_qty: 2

I looked at using map, but all the examples seemed to be using an array structure like

a = [1, 2, 3, 4],
b = [34, 54, 54, 43],

which isn't representative of the type of arrays I have.

Some pointers on what function is available to do what I need would be much appreciated.

Answer 1

You can use reduce , find , and object destructuring to get the desired result.

 const cartArray = [{ max_allowed: 10, product_id: 4202, product_name: "34 inch Gold Number 1 Foil Balloon (1)", qty: 3, }, { max_allowed: 10, product_id: 7, product_name: "34 inch Gold Number 1 Foil Balloon (1)", qty: 3, }]; const cartqtyArray = [{ product_id: 4202, basket_qty: 2 }, { product_id: 4203, basket_qty: 10 }, { product_id: 0, basket_qty: 0 }, { product_id: 0, basket_qty: 0 }, { product_id: 0, basket_qty: 0 }, { product_id: 0, basket_qty: 0 }, { product_id: 0, basket_qty: 0 }, { product_id: 0, basket_qty: 0 }, { product_id: 0, basket_qty: 0 }, { product_id: 0, basket_qty: 0 }, { product_id: 0, basket_qty: 0 }, ]; const result = cartArray.reduce((acc, cart) => { const cartItemInCartQty = cartqtyArray.find( (x) => x.product_id === cart.product_id ); if (cartItemInCartQty) { acc.push({...cart, ...cartItemInCartQty }); } else { acc.push(cart) } return acc; }, []); console.log(result);

Answer 2

It would be good to think time complexity too if you have large lists to merge. May be you could give a try below snippet

 const cartqtyArrayHash = cartqtyArray.reduce((acc, prod)=> { acc[prod.product_id] =prod; return acc; }, {}); const result = cartArray.map(cart => Object.assign({}, cart, cartqtyArrayHash[cart.product_id]));