Merge two objects with keeping the properties of the first object if they are not existing in the second object

Question

i want a help here since i cannot find a proper solution: I have two objects:

obj1 = {
    name: '112',
    surname: { test: '123', other: '124' },
    age: 151,
    height: '183',
    weight: 80
  };

and

obj2 = {
    name: '114',
    surname: { test: '124' },
    age: 151,
    height: 184,
    weight: 81
  };

The new object must have this output:

new = {
        name: '114',
        surname: { test: '124', other: '124' },
        age: 151,
        height: 184,
        weight: 81
      };

You can see that in the surname propert the other property is kept: I've tried something like this but it's not working and there must be a simpler solution:

const newObje = Object.keys(obj2).reduce(newObj, key) => {
    if (typeof (obj2[key]) === 'string' || obj2[key] === 'number') {
      newObj[key] = obj2[key];
    }
    if (typeof (obj2[key]) === 'object' || obj2[key] === 'array') {

    }
  }

If your objects can be arbitrarily deep you're going to need a recursive solution. — Alnitak, Jul 08 '19 at 13:12
As @TirthrajRao mentioned you could do `newObj = {...obj1,...obj2}` making use of the spread operator `...` — sudo97, Jul 08 '19 at 13:20
If you only have to work with the given structure: `let res = Object.assign(obj2, {surname: Object.assign(obj1.surname, obj2.surname)})` or shorter: `let res = {...obj2, surname: {...obj1.surname, ...obj2.surname}}` — claasic, Jul 08 '19 at 13:21

score 1 · Answer 1 · answered Jul 08 '19 at 13:12

You can use lodash .merge

_.merge(obj1 , obj2)

It will deep merge both objects as you can see in the docs

This method is like _.assign except that it recursively merges own and inherited enumerable string keyed properties of source objects into the destination object. Source properties that resolve to undefined are skipped if a destination value exists. Array and plain object properties are merged recursively. Other objects and value types are overridden by assignment. Source objects are applied from left to right. Subsequent sources overwrite property assignments of previous sources.

    let obj1 = {
        name: '112',
        surname: { test: '123', other: '124' },
        age: 151,
        height: '183',
        weight: 80
      };
      
    let obj2 = {
        name: '114',
        surname: { test: '124' },
        age: 151,
        height: 184,
        weight: 81
      };
      
let newObj = _.merge(obj1, obj2)

console.log(newObj)

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

score 1 · Answer 2 · answered Jul 08 '19 at 13:34

You could use a merging function and overwrite values with the last value.

function merge(...objects) {
    function m(t, s) {
        Object.entries(s).forEach(([k, v]) => {
            t[k] = v && typeof v === 'object' ? m(t[k] || {}, v) : v;
        });
        return t;
    }

    return objects.reduce(m, {});
}

var obj1 = { name: '112', surname: { test: '123', other: '124' }, age: 151, height: '183', weight: 80 },
    obj2 = { name: '114', surname: { test: '124' }, age: 151, height: 184, weight: 81 },
    result = merge(obj1, obj2);

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Merge two objects with keeping the properties of the first object if they are not existing in the second object

2 Answers2