How to Merge two array of objects based on same key and value in javascript?

Question

I have two arrays videos and storeProducts. videos array may have product_id and storeProducts must have product_id. I need merge these based on both produt_id same else only push video items in array.

     let videos = [
      {
        "id": 1,
        "product_id":"training_video_test_1",
        "video_title": "Video title 1",
        "video_short_description": "desc 1"
      },
      {
        "id": 2,
        "product_id":"training_video_test_2",
        "video_title": "Video title 2",
        "video_short_description": "desc 2"
      },
      {
        "id": 3,
        "product_id":"training_video_test_3",
        "video_title": "Video title 3",
        "video_short_description": "desc 3"
      }
     
  ];
  
  let storeProducts = [
      {
          "product_id":"training_video_test_1",
          "prduct_title":"training_video_test_1",
          "price":100
      },
      {
        "product_id":"training_video_test_2",
        "prduct_title":"training_video_test_2",
        "price":100
    }
  ];

I need to merge these two when storeProducts.product_id === videos.product_id otherswise ignore store products items push only video items.

Example output:

[
      {
        "id": 1,
        "product_id":"training_video_test_1",
        "video_title": "Video title 1",
        "video_short_description": "desc 1",
        "prduct_title":"training_video_test_1",
        "price":100
      },
      {
        "id": 2,
        "product_id":"training_video_test_2",
        "video_title": "Video title 2",
        "video_short_description": "desc 2",
        "prduct_title":"training_video_test_2",
        "price":100
      },
      {
        "id": 3,
        "product_id":"training_video_test_3",
        "video_title": "Video title 3",
        "video_short_description": "desc 3"
      }
  ]

I have tried Like this:

let resultArr = [];
videos.forEach((v)=>{
  storeProducts.forEach((p)=>{
  if(p.product_id == v.product_id){
      resultArr.push(Object.assign({},v,p))
    
    }
  })
})

But it doesn't work as i expected.Please help me.

What are you doing when the product_id does not match? Also consider using === for comparison and not == — Harmandeep Singh Kalsi
– Harmandeep Singh Kalsi, Commented Aug 27, 2020 at 12:56
if i do like this: let resultArr = []; videos.forEach((v)=>{ storeProducts.forEach((p)=>{ if(p.product_id === v.product_id){ resultArr.push(Object.assign({},v,p)) }else{ resultArr.push(Object.assign({},p)) } }) }) It duplicates. — Hari
– Hari, Commented Aug 27, 2020 at 12:59

Nikita Madeev · Accepted Answer · 2020-08-27 12:59:26Z

13

You can use map instead

let videos = [
    { id: 1, product_id: "training_video_test_1", video_title: "Video title 1", video_short_description: "desc 1" },
    { id: 2, product_id: "training_video_test_2", video_title: "Video title 2", video_short_description: "desc 2" },
    { id: 3, product_id: "training_video_test_3", video_title: "Video title 3", video_short_description: "desc 3" },
];

let storeProducts = [
    { product_id: "training_video_test_1", prduct_title: "training_video_test_1", price: 100 },
    { product_id: "training_video_test_2", prduct_title: "training_video_test_2", price: 100 },
];

const result = videos.map(v => ({ ...v, ...storeProducts.find(sp => sp.product_id === v.product_id) }));

console.log(result);

answered Aug 27, 2020 at 12:59

Nikita Madeev

4,49012 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Hari Over a year ago

You are awesome.It works. Can you suggest some advanced array operations tutorials in javascript?. I Mostly use for and forEach.

Nikita Madeev Over a year ago

@Hari Try to familiarize yourself with the methods for working with arrays in ES5

Daisy Over a year ago

That is a good one. It works perfect for me. Thank you so much.

nikals · Accepted Answer · 2020-08-27 12:59:15Z

3

Use spread operator.

let resultArr = [];
videos.forEach((v)=>{
    storeProducts.forEach((p)=>{
        if(p.product_id == v.product_id){
            resultArr.push({...v, ...p})

        }
    })
})

answered Aug 27, 2020 at 12:59

nikals

1361 silver badge4 bronze badges

Comments

Ele · Accepted Answer · 2020-08-27 13:15:16Z

I recommend you to avoid a find and spread operator for each element within the handler (very poor performance), you can transform the storeProducts array to a key-value object which provides a faster way to access objects.

let videos = [    {      "id": 1,      "product_id":"training_video_test_1",      "video_title": "Video title 1",      "video_short_description": "desc 1"    },    {      "id": 2,      "product_id":"training_video_test_2",      "video_title": "Video title 2",      "video_short_description": "desc 2"    },    {      "id": 3,      "product_id":"training_video_test_3",      "video_title": "Video title 3",      "video_short_description": "desc 3"    }],
    storeProducts = [    {      "product_id":"training_video_test_1",      "prduct_title":"training_video_test_1",      "price":100    },    {      "product_id":"training_video_test_2",      "prduct_title":"training_video_test_2",      "price":100  }],
    mapped = storeProducts.reduce((a, c) => (a[c.product_id] = c, a), {}),
    result = videos.map(o => Object.assign(o, mapped[o.product_id]));

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Collectives™ on Stack Overflow

How to Merge two array of objects based on same key and value in javascript?

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related