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

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]));

Answer 2

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);