merge 2 array and replace same key using lodash

Question

i have this 2 array,

const firstArray = [
{
 key: 'a',
 value: 'a'
},
{
 key: 'b',
 value: 'b'
},
{
 key: 'c',
 value: 'c'
}
]

const secondArray = [
{
 key: 'b',
 value: 'd'
},
{
 key: 'c',
 value: 'e'
}
]

i want to merge these 2 array, and if a same key found on second array the second array value will replace first array value

the new array should look like this

const expectedArray = [
{
 key: 'a',
 value: 'a'
},
{
 key: 'b',
 value: 'd'
},
{
 key: 'c',
 value: 'e'
}
]

Answer 1

As I see lodash in your tags, I assume you want to use it.

You can use something like this:

var merged = _(firstArray)
  .concat(secondArray)
  .groupBy("key")
  .map(_.spread(_.merge))
  .value();

It basically groups all objects with the same key into an array with groupBy("key"), then flattens out each array of values merging them and taking the last one with .map(_.spread(_.merge)).

I suggest commenting out the final likes and see all the intermediate steps if you want to fully understand the process, it's interesting!

const firstArray = [{
    key: 'a',
    value: 'a'
  },
  {
    key: 'b',
    value: 'b'
  },
  {
    key: 'c',
    value: 'c'
  }
]

const secondArray = [{
    key: 'b',
    value: 'd'
  },
  {
    key: 'c',
    value: 'e'
  }
]

var merged = _(firstArray)
  .concat(secondArray)
  .groupBy("key")
  .map(_.spread(_.merge))
  .value();

console.log(merged);

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