How to merge two objects, overriding null values?

Question

I'd like to merge two similar but not identical objects and override null values in one of them, if such exist. For example I'd have these two objects:

const obj1 = {
    a: 1,
    b: '',
    c: [],
    d: null
}

const obj2 = {
    a: 2,
    b: null,
    d: 1
}

And the effect of merge should be:

const objMerged = {
    a: 2,
    b: '',
    c: [],
    d: 1
}

In other words, the most important source of data in the merged object is obj2 but it lacks some properties from obj1, so they need to be copied and also some of the obj2 values are null so they should be taken from obj1 as well.

EDIT I tried:

_.extend({}, obj1, obj2)

and

Object.assign({}, obj1, obj2)

have you tried anything before asking? – depperm May 17 '19 at 14:09 — depperm, May 17 '19 at 14:09
Yes, Object.assign and the lodash extend function. – Hubert Kubiak May 17 '19 at 14:09 — Hubert Kubiak, May 17 '19 at 14:09
can you include your attempts in the question – depperm May 17 '19 at 14:10 — depperm, May 17 '19 at 14:10
Object.assign({}, obj1, obj2); – Hubert Kubiak May 17 '19 at 14:11 — Hubert Kubiak, May 17 '19 at 14:11
please edit the question with both of your attempts – depperm May 17 '19 at 14:11 — depperm, May 17 '19 at 14:11
What about removing "null" value first? – Ngob May 17 '19 at 14:15 — Ngob, May 17 '19 at 14:15

Akrion · Answer 1 · 2019-05-18T21:37:48.870

You could also mix and match with ES6 destructuring and lodash _.omitBy:

const obj1 = { a: 1, b: '', c: [], d: null }
const obj2 = { a: 2, b: null, d: 1 }

const result = {..._.omitBy(obj1, _.isNull), ..._.omitBy(obj2, _.isNull)}

console.log(result)

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

You could also do it with ES6 only like this:

const obj1 = { a: 1, b: '', c: [], d: null }
const obj2 = { a: 2, b: null, d: 1 }

let omitNull = obj => {
  Object.keys(obj).filter(k => obj[k] === null).forEach(k => delete(obj[k]))
  return obj
}

const result = { ...omitNull(obj1), ...omitNull(obj2) }

console.log(result)

Ori Drori · Accepted Answer · 2019-05-17T14:24:04.647

5

You can use _.mergeWith(), and in the merge callback only take the 2nd value if it's not null:

const obj1 = { a: 1, b: '', c: [], d: null }
const obj2 = { a: 2, b: null, d: 1 }

const result = _.mergeWith({}, obj1, obj2, (o, s) => _.isNull(s) ? o : s)

console.log(result)

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>

edited May 17 '19 at 14:24

answered May 17 '19 at 14:18

Ori Drori

183,571
29
224
209

Andrew Rooney · Answer 3 · 2020-12-03T22:17:06.327

5

To add to this list of good answers, here's a recursive solution that will work with nested structures.

This example will merge the common properties of the dst object to the src object in all levels of nesting, leaving any properties that are not common intact.

const merge = (dst, src) => {
  Object.keys(src).forEach((key) => {
    if (!dst[key]) {
      dst[key] = src[key];
    } else if (typeof src[key] === 'object' && src[key] !== null && typeof dst[key] === 'object' && dst[key] !== null) {
      merge(dst[key], src[key]);
    }
  });
},

/* Usage: */

src = {
  prop1: '1',
  prop2: {
    val: 2,
  }
},
dst = {
  prop1: null,
  prop2: {
    val: null,
  },
  prop3: null,
};

merge(dst, src);
console.log(dst);

edited Dec 03 '20 at 22:17

answered Aug 11 '20 at 21:42

Andrew Rooney

169
2
6

2

Great answer. I really like this solution! – 010011100101 Oct 05 '20 at 22:09
Great except I recommend `if (dst[key] == null)` instead b/c an integer of 0 would get replaced even though it's not null. – Oleg Fridman Apr 19 '22 at 16:09

Dani Vijay · Answer 4 · 2019-05-17T14:49:10.890

Here is a pure JS based solution:

Iterate through the first object to replace values from second object, then add the additional values from the second object.

const obj1 = {
    a: 1,
    b: '',
    c: [],
    d: null
}

const obj2 = {
    a: 2,
    b: null,
    d: 1
}

function mergeObjs(obj1, obj2){
  const merged = {}
  keys1 = Object.keys(obj1);
  keys1.forEach(k1 => {
     merged[k1] = obj2[k1] || obj1[k1]; // replace values from 2nd object, if any
  })
  Object.keys(obj2).forEach(k2 => {
     if (!keys1.includes(k2)) merged[k2] = obj[k2]; // add additional properties from second object, if any
  })
  return merged
}


console.log(mergeObjs(obj1, obj2))

merged[k2] = obj[k2] needs to be merged[k2] = obj2[k2] – Dave Jan 05 '21 at 07:06 — Dave, Jan 05 '21 at 07:06

score 2 · Answer 5 · answered May 17 '19 at 14:18

Using Lodash by create() and omitBy()

const obj1 = {"a":1,"b":"","c":[],"d":null}

const obj2 = {"a":2,"b":null,"d":1}

const objMerged = _.create(
  _.omitBy(obj1, _.isNull),
  _.omitBy(obj2, _.isNull)
)

console.log(objMerged)

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

score 1 · Answer 6 · answered May 17 '19 at 14:17

If you're interested in only the first level of the two objects you could do something like this:

const obj1 = {
  a: 1,
  b: '',
  c: [],
  d: null
}

const obj2 = {
  a: 2,
  b: null,
  d: 1
}

const merged = Object.keys(obj1).concat(Object.keys(obj2)) // create an array that contains the keys of the two objects.
  .filter((k, i, arr) => arr.indexOf(k) === i) // remove duplicate keys
  .reduce((a, c) => {
    a[c] = obj1[c] !== null ? obj1[c] : obj2[c];
    return a;
  }, {});

console.log(merged);

This example only check for null values, you should probably extend it to check for others like undefined, empty strings, etc.

score 1 · Answer 7 · answered May 17 '19 at 14:18

1

You did it the good way using Object.assign, just remove what you don't want right before

Object.keys(obj1).forEach( k => {
    if ( obj1[k] //write the condition you want
        delete obj1[k]
});

answered May 17 '19 at 14:18

farvilain

2,552
2
13
24

score 1 · Answer 8 · answered May 17 '19 at 14:27

var objMerged  = {};
for (var kobj1 in obj1) {
    for (var kobj2 in obj2) {
        if (obj1[kobj1] == null && obj2[kobj1] != null)
            objMerged[kobj1] = obj2[kobj1];
        else if (obj2[kobj2] == null && obj1[kobj2] != null)
            objMerged[kobj2] = obj1[kobj2];

    }
}

//Print objMerged to display

How to merge two objects, overriding null values?

8 Answers8

Linked