How to merge two arrays of objects by ID using lodash?

Question

I have two array with one common field member. how can I merge theme easily?

For example:

var arr1 = [{
  "member" : ObjectId("57989cbe54cf5d2ce83ff9d6"),
  "bank" : ObjectId("575b052ca6f66a5732749ecc"),
  "country" : ObjectId("575b0523a6f66a5732749ecb")
},
{
  "member" : ObjectId("57989cbe54cf5d2ce83ff9d8"),
  "bank" : ObjectId("575b052ca6f66a5732749ecc"),
  "country" : ObjectId("575b0523a6f66a5732749ecb")
}];

var arr2 = [{
    "member" : ObjectId("57989cbe54cf5d2ce83ff9d6"),
    "name" : 'xxxxxx',
    "age" : 25
},
{
    "member" : ObjectId("57989cbe54cf5d2ce83ff9d8"),
    "name" : 'yyyyyyyyyy',
    "age" : 26
}];

Expected:

var merge = [{
  "member" : ObjectId("57989cbe54cf5d2ce83ff9d6"),
  "bank" : ObjectId("575b052ca6f66a5732749ecc"),
  "country" : ObjectId("575b0523a6f66a5732749ecb"),
  "name" : 'xxxxxx',
  "age" : 25
},
{
  "member" : ObjectId("57989cbe54cf5d2ce83ff9d8"),
  "bank" : ObjectId("575b052ca6f66a5732749ecc"),
  "country" : ObjectId("575b0523a6f66a5732749ecb"),
  "name" : 'yyyyyyyyyy',
  "age" : 26
}];

I tried

var merge = _.unionBy(arr1, arr2, 'member');

but not merged as expected. shown array1 value. can any one help me?

http://youmightnotneedjquery.com/#deep_extend or http://youmightnotneedjquery.com/#extend, which links to https://lodash.com/docs#assign — Simon Hänisch, Jul 27 '16 at 12:40
I remember that you've asked this [question previously](http://stackoverflow.com/questions/38505448/how-to-merge-multiple-array-of-object-by-id-in-javascript) and I think that the most upvoted answer should've sufficed as the answer. Simply change `memberID` with `member` and remove `arr3` and `arr4` in the concatenation. — ryeballar, Jul 27 '16 at 14:18
The answer you got previously was more of a gem than you realize. Don't ask us to post it twice, just close as a duplicate. — 4castle, Jul 29 '16 at 14:13

score 63 · Answer 1 · edited Feb 22 '17 at 11:51

If both arrays are in the correct order; where each item corresponds to its associated member identifier then you can simply use.

var merge = _.merge(arr1, arr2);

Which is the short version of:

var merge = _.chain(arr1).zip(arr2).map(function(item) {
    return _.merge.apply(null, item);
}).value();

Or, if the data in the arrays is not in any particular order, you can look up the associated item by the member value.

var merge = _.map(arr1, function(item) {
    return _.merge(item, _.find(arr2, { 'member' : item.member }));
});

You can easily convert this to a mixin. See the example below:

_.mixin({
  'mergeByKey' : function(arr1, arr2, key) {
    var criteria = {};
    criteria[key] = null;
    return _.map(arr1, function(item) {
      criteria[key] = item[key];
      return _.merge(item, _.find(arr2, criteria));
    });
  }
});

var arr1 = [{
  "member": 'ObjectId("57989cbe54cf5d2ce83ff9d6")',
  "bank": 'ObjectId("575b052ca6f66a5732749ecc")',
  "country": 'ObjectId("575b0523a6f66a5732749ecb")'
}, {
  "member": 'ObjectId("57989cbe54cf5d2ce83ff9d8")',
  "bank": 'ObjectId("575b052ca6f66a5732749ecc")',
  "country": 'ObjectId("575b0523a6f66a5732749ecb")'
}];

var arr2 = [{
  "member": 'ObjectId("57989cbe54cf5d2ce83ff9d8")',
  "name": 'yyyyyyyyyy',
  "age": 26
}, {
  "member": 'ObjectId("57989cbe54cf5d2ce83ff9d6")',
  "name": 'xxxxxx',
  "age": 25
}];

var arr3 = _.mergeByKey(arr1, arr2, 'member');

document.body.innerHTML = JSON.stringify(arr3, null, 4);

body { font-family: monospace; white-space: pre; }

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

Using `_.find` inside `_.map` is creating an O(n^2) solution. — 4castle, Jul 29 '16 at 14:19
Also note that this answer will omit elements in arr2 that do not exist in arr1. Prefer Ori Drori's answer. — joniba, Mar 23 '17 at 17:55
does not work at all, I end up with the value of the last array instead of both merged array — Phil, Feb 05 '18 at 10:49

Ori Drori · Answer 2 · 2017-11-20T07:34:48.710

Create dictionaries for both arrays using _.keyBy(), merge the dictionaries, and convert the result to an array with _.values(). In this way, the order of the arrays doesn't matter. In addition, it can also handle arrays of different length.

const ObjectId = (id) => id; // mock of ObjectId
const arr1 = [{"member" : ObjectId("57989cbe54cf5d2ce83ff9d8"),"bank" : ObjectId("575b052ca6f66a5732749ecc"),"country" : ObjectId("575b0523a6f66a5732749ecb")},{"member" : ObjectId("57989cbe54cf5d2ce83ff9d6"),"bank" : ObjectId("575b052ca6f66a5732749ecc"),"country" : ObjectId("575b0523a6f66a5732749ecb")}];
const arr2 = [{"member" : ObjectId("57989cbe54cf5d2ce83ff9d6"),"name" : 'xxxxxx',"age" : 25},{"member" : ObjectId("57989cbe54cf5d2ce83ff9d8"),"name" : 'yyyyyyyyyy',"age" : 26}];

const merged = _(arr1) // start sequence
  .keyBy('member') // create a dictionary of the 1st array
  .merge(_.keyBy(arr2, 'member')) // create a dictionary of the 2nd array, and merge it to the 1st
  .values() // turn the combined dictionary to array
  .value(); // get the value (array) out of the sequence

console.log(merged);

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

Using ES6 Map

Concat the arrays, and reduce the combined array to a Map. Use Object#assign to combine objects with the same member to a new object, and store in map. Convert the map to an array with Map#values and spread:

const ObjectId = (id) => id; // mock of ObjectId
const arr1 = [{"member" : ObjectId("57989cbe54cf5d2ce83ff9d8"),"bank" : ObjectId("575b052ca6f66a5732749ecc"),"country" : ObjectId("575b0523a6f66a5732749ecb")},{"member" : ObjectId("57989cbe54cf5d2ce83ff9d6"),"bank" : ObjectId("575b052ca6f66a5732749ecc"),"country" : ObjectId("575b0523a6f66a5732749ecb")}];
const arr2 = [{"member" : ObjectId("57989cbe54cf5d2ce83ff9d6"),"name" : 'xxxxxx',"age" : 25},{"member" : ObjectId("57989cbe54cf5d2ce83ff9d8"),"name" : 'yyyyyyyyyy',"age" : 26}];

const merged = [...arr1.concat(arr2).reduce((m, o) => 
  m.set(o.member, Object.assign(m.get(o.member) || {}, o))
, new Map()).values()];

console.log(merged);

yep this one works while lodash fails miserably and returns only the content of the last array — Phil, Feb 05 '18 at 10:52
if the arrays always have same size, you can sort by id, zip, map — repo, Jul 31 '18 at 10:10
I think it could break the order as the JS Object/Map object does not guarantee any. — magom001, Dec 26 '18 at 12:54
Map order is guaranteed, and [object iteration order](http://2ality.com/2015/10/property-traversal-order-es6.html) is guaranteed in ES6. — Ori Drori, Dec 26 '18 at 12:58

How to merge two arrays of objects by ID using lodash?

2 Answers2

Linked