JavaScript how to map through two different arrays of objects and return one array conditionally

Question

hello I need help creating the newProducts in the following example array dynamically without knowing what's in the other two arrays https://jsfiddle.net/od4267fv/ more explanation:

I would like to check

products = [
  {
    id: 1,
    name: 'product 1' ,
    liked:  false
  },
{
    id: 2,
    name: 'product 2' ,
    liked:  false
  },
  {
    id: 3,
    name: 'product 3' ,
    liked:  false
  },
  {
    id: 4,
    name: 'product 4' ,
    liked:  false
  },
  {
    id: 5,
    name: 'product 5' ,
    liked:  false
  },

]
likedProducts = [
   {
    id: 1,
    name: 'product 1' ,
    liked:  true
  },
{
    id: 2,
    name: 'product 2' ,
    liked:  true
  },
  {
    id: 3,
    name: 'product 3' ,
    liked:  true
  },

]
if proucts[product].id === likedProducts[product].id
newProducts.push(likedProducts[product])
else
newProducts.push(proucts[product])

please recommend suitable ways to do it

answered a thousand times, you need an iterator that checks https://stackoverflow.com/questions/4587061/how-to-determine-if-object-is-in-array — john Smith, Jan 06 '21 at 10:21

venkatesh pogartha · Answer 1 · 2021-01-06T10:37:56.333

0

Try this

const allProducts = products.filter(n => likedProducts.find(n2 => n.id == n2.id));

edited Jan 06 '21 at 10:37

answered Jan 06 '21 at 10:20

venkatesh pogartha

271
1
5

score 0 · Accepted Answer · answered Jan 06 '21 at 10:26

You can do the following using map() and findIndex(),

products = [
  {
    id: 1,
    name: 'product 1' ,
    liked:  false
  },
{
    id: 2,
    name: 'product 2' ,
    liked:  false
  },
  {
    id: 3,
    name: 'product 3' ,
    liked:  false
  },
  {
    id: 4,
    name: 'product 4' ,
    liked:  false
  },
  {
    id: 5,
    name: 'product 5' ,
    liked:  false
  },

]
likedProducts = [
   {
    id: 1,
    name: 'product 1' ,
    liked:  true
  },
{
    id: 2,
    name: 'product 2' ,
    liked:  true
  },
  {
    id: 3,
    name: 'product 3' ,
    liked:  true
  },

]

newProducts = products.map(item => {
  let index = likedProducts.findIndex(likedProduct => likedProduct.id === item.id);
  if(index > -1) {
    return likedProducts[index];
  }
  return item;
})

console.log(newProducts);

score 0 · Answer 3 · answered Jan 06 '21 at 10:28

This is the way to iterate over 2 array and update value upon some certain condition.

const updatedProduct = proucts.map((row, indexOfRows) => {
        for (let index = 0; index < likedProducts.length; index++) {
          if (likedProducts[index].id === row.id) {
            return likedProducts[index];
          }
        }
        return row;
      });

score 0 · Answer 4 · answered Jan 06 '21 at 10:36

You can do a single iteration over each of the arrays. First index all products by their id, then iterate over the liked products and overwrite the indexed items. This way, it doesn't matter how many items each array has, nor do you need to do constant lookups into at least one of the arrays.

const products = [{id: 1,name: 'product 1' ,liked:  false},{id: 2,name: 'product 2' ,liked:  false},{id: 3,name: 'product 3' ,liked:  false},{id: 4,name: 'product 4' ,liked:  false},{id: 5,name: 'product 5' ,liked:  false},];
const likedProducts = [{id: 1,name: 'product 1' ,liked:  true},{id: 2,name: 'product 2' ,liked:  true},{id: 3,name: 'product 3' ,liked:  true},];

const index = new Map();

//index all products
for (let item of products) {
  index.set(item.id, item);
}

//overwrite anything that is liked 
for (let likedItem of likedProducts) {
  if (index.has(likedItem.id)) {
    index.set(likedItem.id, likedItem);
  }
}

//construct a new array from the values
const result = Array.from(index.values());

console.log(result);

JavaScript how to map through two different arrays of objects and return one array conditionally

4 Answers4

Linked