Deep Merge using Lodash

Question

I have two arrays of objects that contain addresses that have a label and an object for the actual address:

var originalAddresses = [
  {
    label: 'home',
    address: { city: 'London', zipCode: '12345' }
  },
  {
    label: 'work',
    address: { city: 'New York', zipCode: '54321' }
  }
];

var updatedAddresses = [
  {
    label: 'home',
    address: { city: 'London (Central)', country: 'UK' }
  },
  {
    label: 'spain',
    address: { city: 'Madrid', zipCode: '55555' }
  }
];

Now I want to merge these arrays by label and compare the individual properties of the addresses and merge only the properties from the new address that are actually present. So the result should look like this:

var result = [
  {
    label: 'home',
    address: { city: 'London (Central)', zipCode: '12345', country: 'UK' }
  },
  {
    label: 'work',
    address: { city: 'New York', zipCode: '54321' }
  },
  {
    label: 'spain',
    address: { city: 'Madrid', zipCode: '55555' }
  }
]

How can I do this using lodash? I tried a combination of unionBy() and merge(). With unionBy() I was able to compare and join the arrays by label, but this always replaces the whole object. I can sure merge the addresses but this doesn't happen by label then.

I know this is just an example, but your question implies that if the "home" entry changes to a completely different city, but you didn't provide a new zipCode, you would want to passthrough the old zipCode? Seems like in practical terms, you'd want to build a custom semantic merge handler for realistic implementations of something like this.. — Ciabaros
– Ciabaros, Commented Nov 9, 2024 at 17:53

Ori Drori · Accepted Answer · 2017-07-04 06:39:22Z

59

You can turn both arrays into objects using _.keyBy(arr, 'label'), and then merge deep using _.merge():

var originalAddresses = [{
  label: 'home',
  address: {
    city: 'London',
    zipCode: '12345'
  }
}, {
  label: 'work',
  address: {
    city: 'New York',
    zipCode: '54321'
  }
}];

var updatedAddresses = [{
  label: 'home',
  address: {
    city: 'London (Central)',
    country: 'UK'
  }
}, {
  label: 'spain',
  address: {
    city: 'Madrid',
    zipCode: '55555'
  }
}];

var result = _.values(_.merge(
  _.keyBy(originalAddresses, 'label'),
  _.keyBy(updatedAddresses, 'label')
));

console.log(result);

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

edited Jul 4, 2017 at 6:39

answered Aug 31, 2016 at 19:12

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

panchihpeng · Accepted Answer · 2021-10-22 03:53:24Z

1

I try to use VanillaJS to handle this.

const originalAddresses = [{
    label: 'home',
    address: {
        city: 'London',
        zipCode: '12345'
    }
}, {
    label: 'work',
    address: {
        city: 'New York',
        zipCode: '54321'
    }
}];

const updatedAddresses = [{
    label: 'home',
    address: {
        city: 'London (Central)',
        country: 'UK'
    }
}, {
    label: 'spain',
    address: {
        city: 'Madrid',
        zipCode: '55555'
    }
}];


const groupBy = (array, property) => {
    return array.reduce((acc, cur) => {
            let key = cur[property]
            if (!acc[key]) {
                acc[key] = []
            }
            acc[key].push(cur)

            return acc
        }
        , {})
}

const groupByLabel = groupBy([...originalAddresses, ...updatedAddresses], 'label')

const result  = Object.keys(groupByLabel).map((key) => {
        return {
            label: groupByLabel[key][0].label,
            address: groupByLabel[key].reduce((acc, cur) => {
                    return Object.assign(acc, cur.address)
                }
                , {})
        }
    }
)
console.log(result)

answered Oct 22, 2021 at 3:53

panchihpeng

192 bronze badges

1 Comment

Imants Volkovs Over a year ago

groupBy is generic and can accept any inputs, but result is not. It is tied to this data constellation. Would advise make it, so it accepts any input for final method

Sajjad Ziaenezhad Shirazi · Accepted Answer · 2023-12-13 10:59:30Z

1

Use defaultsDeep:

console.log(_.defaultsDeep(
  {
    'x': { 'y': 20 }
  },
  {
    'x': { 'y': 10, 'z': 30 }
  }
));

Output:

{ 'x': { 'y': 20, 'z': 30 } }

answered Dec 13, 2023 at 10:59

Sajjad Ziaenezhad Shirazi

2,81029 silver badges25 bronze badges

1 Comment

Adarsh Mohan Over a year ago

fails if they are arrays.

Collectives™ on Stack Overflow

Deep Merge using Lodash

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related