CODEWITHSUNDEEP
javascriptarrays
Hari
Hari

Reputation: 45

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

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.

Upvotes: 4

Views: 16462

Answers (3)

Ele
Ele

Reputation: 33726

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

Upvotes: 3

Nikita Madeev
Nikita Madeev

Reputation: 4380

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

Upvotes: 13

nikals
nikals

Reputation: 136

Use spread operator.

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

        }
    })
})

Upvotes: 3

Related Questions