How to merge two Objects and keep the hierarchy between properties?

Question

I have a question about the two objects above:

const object1 = { issues: { global: 'a great string!' } };
const object2 = { issues: { cooldown: 'oh well, another message!' } };

For the purpose of my code, I would need to merge everything but keep the hierarchy between the properties. Like this:

Object.assign(object1, object2);
console.log(object1);
// expected output: { issues: { global: 'a great string!', cooldown: 'oh well, another message!' } }

Except that the problem is that the Object.assign() works such that it will overwrite the previous property (here global) to keep only the last property (here cooldown). Like this:

Object.assign(object1, object2);
console.log(object1);
// real output: { issues: { cooldown: 'oh well, another message!' } }

My question is then simple: how do we get the expected result? I guess it's not as simple as a simple Object.assign(), but precisely: how? Knowing that obviously I took here an example and that, in reality, impossible to know in advance which properties will arrive...

Thanking you for help

Does this help `obj = {issues: {...object1.issues, ...object2.issues}}` ? — testing_22, Jun 25 '22 at 18:19

Tushar Shahi · Answer 1 · 2022-06-25T18:28:10.087

I think a recursive solution will help for any level of nesting:

const obj1 = { issues: { global: 'a great string!' } };
const obj2 = { issues: { cooldown: 'oh well, another message!' } };

const obj3 = { issues: { global: 'a great string!' } , problems : { name : 'cool' , size : {
  medium : 'ok',
  small : 'ok'
} } };
const obj4 = { issues: { cooldown: 'oh well, another message!' } , problems : { name : 'cool' , size : {
  big : 'not ok',
} }  };



const merge = (obj1,obj2) => {
  const newObj = {};
  for(let key in obj1){
    if(typeof obj1[key] !== 'object'){
      newObj[key] = obj1[key]; 
    }
    else
  if(key in obj2){
    newObj[key] = merge(obj1[key],obj2[key]);
  }
  else{
   newObj[key] = obj1[key];
   }
  }
  for(let key in obj2){
  if(!(key in obj1)){
    newObj[key] = obj2[key];
  }
  }
  return newObj;    
};

console.log(merge(obj1,obj2));
console.log(merge(obj3,obj4));

You check if keys are matching (available in both objects) and based on that add a new key to your new result object.

Note: The above by defaults handle case when the property values are not objects. You can change and add your desired behaviour

Mohssine Oussama · Answer 2 · 2022-06-25T19:19:09.510

i create this function i think it will do the work

const obj1 = { issues: { global: 'a great string!' } };
const obj2 = { issues: { cooldown: 'oh well, another message!' } };

const obj3 = {
    issues: { global: 'a great string!' }, problems: {
        name: 'cool', size: {
            medium: 'ok',
            small: 'ok'
        }
    }
};
const obj4 = {
    issues: { cooldown: 'oh well, another message!' }, problems: {
        name: 'cool', size: {
            big: 'not ok',
        }
    }
};

const mergeObj = (obj1, obj2) => {
    const Obj1Keys = Object.keys(obj1)
    const Obj2Keys = Object.keys(obj1)
    const allKeys = [...new Set([...Obj1Keys, ...Obj2Keys])]
    const newObj = {}
    for (let i = 0; i < allKeys.length; i++) {
        const key = allKeys[i]
        if (typeof obj1[key] === "object" && typeof obj2[key] === "object")
            newObj[key] = mergeObj(obj1[key], obj2[key])
    }
    return Object.assign(obj1, obj2, newObj)
}
console.log(mergeObj(obj3, obj4));

How to merge two Objects and keep the hierarchy between properties?

2 Answers2