Combining the content of multiple objects that have the same key with that key as the property in JavaScript

I want to combine the content of multiple objects that have the same key with that key as the property in JavaScript.

Objects:

const cat1 = { med1: { a: 10, b: 12 }, med2: { c: 14, d: 16 } };

const cat2 = { med1: { e: 18, f: 20 }, med2: { g: 22, h: 24 } };

Expected output:

{
   med1: { a: 10, b: 12, e: 18, f: 20 }, 
   med2: { c: 14, d: 16, g: 22, h: 24 }
}

I have tried to use both object spreading and Object.assign with no sucess. With object spreading, since objects have no iterator this is returning an error. Object.assign would work however since the two objects to combine have the same key, the second object is overwriting the first.

Answer

You can iterate over the object keys and create a new object out of their aggregation.

You can use ES6 spread operator (…) which allows us to quickly copy all or part of an existing array or object into another array or object.

const cat1 = { med1: { a: 10, b: 12 }, med2: { c: 14, d: 16 } };
const cat2 = { med1: { e: 18, f: 20 }, med2: { g: 22, h: 24 } };
let resultObject = {};
Object.keys(cat1).map(key => { // iterate over the keys
  resultObject = {
    ...resultObject,
    [key]: {...cat1[key], ...cat2[key]} // merge two objects 
  }
  return;
});

console.log(resultObject);