JavaScript merge an array of objects by key | Example code

  • by

Use the map function or push() method with a loop to merge an array of objects by key in JavaScript.

  1. Map over array1
  2. Search through array2 for array1.id
  3. If you find it …spread the result of array2 into array1

The final array will only contain id’s that match from both arrays

Merge an array of objects by key in JavaScript

Simple example code.

<!DOCTYPE html>
<html>
<body>

  <script>
   let arr1 = [
   { id: "abc1", date: "2017-01-24" },
   { id: "abc2", date: "2017-01-22" }
   ];

   let arr2 = [
   { id: "abc3", name: "John" },
   { id: "abc4", name: "Tim" }
   ];

   let arr3 = arr1.map((item, i) => Object.assign({}, item, arr2[i]));

   console.log(arr3);

 </script>

</body>
</html>

Output:

JavaScript merge an array of objects by key

Use the below code if arr1 and arr2 are in a different order:

let merged = [];

for(let i=0; i<arr1.length; i++) {
  merged.push({
   ...arr1[i], 
   ...(arr2.find((itmInner) => itmInner.id === arr1[i].id))}
  );
}

console.log(merged);

Use this if arr1 and arr2 are in the same order

let merged = [];

for(let i=0; i<arr1.length; i++) {
  merged.push({
   ...arr1[i], 
   ...arr2[i]
  });
}

console.log(merged);

Source: stackoverflow.com

Do comment if you have any doubts or suggestions on this JS Merge array code.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.