javascript - Use mergeWith of Lodash with nested objects - Stack Overflow

admin管理员组

文章数量:1343839

I have two objects like that:

const object1 = {first: [{a: 0, b:3}], second: [{a: 1, b:2}], third: [{a: 3, b:2}]}
const object2 = {first: [{a: 1, b:0}], second: [{a: 10, b:0}], third: [{a: 2, b:3}]}

and I want the sum of these two objects:

const res = {first: [{a: 1, b:3}], second: [{a: 11, b:2}], third: [{a: 5, b:5}]}

I tried to use mergeWith of Lodash in this way:

const res = mergeWith({}, object1, object2, add)

but I get:

{first: NaN, second: NaN, third: NaN}

How can I use mergeWith with nested objects?

I have two objects like that:

const object1 = {first: [{a: 0, b:3}], second: [{a: 1, b:2}], third: [{a: 3, b:2}]}
const object2 = {first: [{a: 1, b:0}], second: [{a: 10, b:0}], third: [{a: 2, b:3}]}

and I want the sum of these two objects:

const res = {first: [{a: 1, b:3}], second: [{a: 11, b:2}], third: [{a: 5, b:5}]}

I tried to use mergeWith of Lodash in this way:

const res = mergeWith({}, object1, object2, add)

but I get:

{first: NaN, second: NaN, third: NaN}

How can I use mergeWith with nested objects?

• javascript
• merge
• lodash

Share Improve this question Follow asked Dec 10, 2018 at 12:55 user10381316user10381316 6

• What is the add function doing? – VLAZ Commented Dec 10, 2018 at 13:09
• Is the add function of Lodash – user10381316 Commented Dec 10, 2018 at 13:09
• Ah, I see. I didn't realist you were importing the functions separately. In that case it won't work, since it would try to add an array to another array which results in NaN, as you see. – VLAZ Commented Dec 10, 2018 at 13:11
• @vlaz Ok, any tips to solve? – user10381316 Commented Dec 10, 2018 at 13:20
• Are you always going to have a single object within the array? As I mean the first: [{a: 0, b:3}] - if you could have two entries in the array, then the merge logic could be more plicated. Or maybe not - if you expect to merge matching indeces. – VLAZ Commented Dec 10, 2018 at 14:35

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 9

When doing mergeWith you need to pass a customizer. Lodash then does a recursive merging of values.

The trick is that if your customizer returns undefined, then merge is used to bine the values. However, since add returns NaN for inpatible values, that value is used instead - so if you merely have a function that works like add but returns undefined instead of NaN, then mergeWith will do all the heavy lifting for you:

const object1 = {first: [{a: 0, b:3}], second: [{a: 1, b:2}], third: [{a: 3, b:2}]}
const object2 = {first: [{a: 1, b:0}], second: [{a: 10, b:0}], third: [{a: 2, b:3}]}

const res = _.mergeWith({}, object1, object2, customizer)

console.log(res);

function customizer(a, b) {
  // you can still use add
  const result = _.add(a, b);
  
  // ignore NaN values and return undefined instead
  if (_.isNaN(result)) { 
    return;
  }
  
  //only bine values that can be bined
  return result;
}

<script src="https://cdn.jsdelivr/npm/[email protected]/lodash.min.js"></script>

An alternative shorter way to express this is by using defaultTo

const object1 = {first: [{a: 0, b:3}], second: [{a: 1, b:2}], third: [{a: 3, b:2}]}
const object2 = {first: [{a: 1, b:0}], second: [{a: 10, b:0}], third: [{a: 2, b:3}]}

const customizer = (a, b) => _.defaultTo(_.add(a, b), undefined)

const res = _.mergeWith({}, object1, object2, customizer)

console.log(res);

<script src="https://cdn.jsdelivr/npm/[email protected]/lodash.min.js"></script>

Defining how to add the objects did the trick:

const res = mergeWith(object1, object2, (objValue, srcValue) =>
    [{
        a: objValue[0].a + srcValue[0].a,
        b: objValue[0].b + srcValue[0].b
    }]
)

本文标签： javascriptUse mergeWith of Lodash with nested objectsStack Overflow