How to merge two object arrays of different size by key in JavaScript

When working with object arrays of different sizes, we often need to merge them based on a common key. This is useful when combining data from different sources that share a common identifier.

Suppose we have an object like this:

const obj = {
   "part1": [{"id": 1, "a": 50},{"id": 2, "a": 55},{"id": 4, "a": 100}],
   "part2":[{"id": 1, "b": 40}, {"id": 3, "b": 45}, {"id": 4, "b": 110}]
};

We need to merge part1 and part2 arrays to form a single array where objects with the same id are combined:

[
   {"id": 1, "a": 50, "b": 40},
   {"id": 2, "a": 55},
   {"id": 3, "b": 45},
   {"id": 4, "a": 100, "b": 110}
]

Using Reduce with Hash Map

This approach uses a hash map to track objects by their id and merge properties:

const obj = {
   "part1": [{"id": 1, "a": 50},{"id": 2, "a": 55},{"id": 4, "a": 100}],
   "part2":[{"id": 1, "b": 40}, {"id": 3, "b": 45}, {"id": 4, "b": 110}]
};

const mergeObject = (obj = {}) => {
   let result = [];
   result = Object.keys(obj).reduce(function (hash) {
      return function (r, k) {
         obj[k].forEach(function (o) {
            if (!hash[o.id]) {
               hash[o.id] = {};
               r.push(hash[o.id]);
            }
            Object.keys(o).forEach(function (l) {
               hash[o.id][l] = o[l];
            });
         });
         return r;
      };
   }(Object.create(null)), []).sort((a, b) => {
      return a['id'] - b['id'];
   });
   return result;
};

console.log(mergeObject(obj));

[
   { id: 1, a: 50, b: 40 },
   { id: 2, a: 55 },
   { id: 3, b: 45 },
   { id: 4, a: 100, b: 110 }
]

Simplified Approach Using Map

Here's a cleaner approach using ES6 Map for better readability:

const obj = {
   "part1": [{"id": 1, "a": 50},{"id": 2, "a": 55},{"id": 4, "a": 100}],
   "part2":[{"id": 1, "b": 40}, {"id": 3, "b": 45}, {"id": 4, "b": 110}]
};

const mergeArrays = (obj) => {
   const map = new Map();
   
   // Process all arrays in the object
   Object.values(obj).forEach(array => {
      array.forEach(item => {
         if (map.has(item.id)) {
            // Merge with existing object
            Object.assign(map.get(item.id), item);
         } else {
            // Add new object
            map.set(item.id, { ...item });
         }
      });
   });
   
   // Convert map values to array and sort by id
   return Array.from(map.values()).sort((a, b) => a.id - b.id);
};

console.log(mergeArrays(obj));

[
   { id: 1, a: 50, b: 40 },
   { id: 2, a: 55 },
   { id: 3, b: 45 },
   { id: 4, a: 100, b: 110 }
]

How It Works

Both approaches follow the same logic:

• Create a lookup structure (hash object or Map) to track objects by their id
• Iterate through all arrays and their objects
• If an object with the same id exists, merge the properties
• If not, create a new entry
• Convert the result back to an array and sort by id

Conclusion

Merging object arrays by key is efficiently handled using hash maps or ES6 Maps. The Map approach offers cleaner syntax and better performance for larger datasets.