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.

Answer 1

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

Answer 2

Use spread operator.

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

        }
    })
})