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

User · Answer

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.

_x000D_

const ObjectId = (id) => id; // mock of ObjectId_x000D_
const arr1 = [{"member" : ObjectId("57989cbe54cf5d2ce83ff9d8"),"bank" : ObjectId("575b052ca6f66a5732749ecc"),"country" : ObjectId("575b0523a6f66a5732749ecb")},{"member" : ObjectId("57989cbe54cf5d2ce83ff9d6"),"bank" : ObjectId("575b052ca6f66a5732749ecc"),"country" : ObjectId("575b0523a6f66a5732749ecb")}];_x000D_
const arr2 = [{"member" : ObjectId("57989cbe54cf5d2ce83ff9d6"),"name" : 'xxxxxx',"age" : 25},{"member" : ObjectId("57989cbe54cf5d2ce83ff9d8"),"name" : 'yyyyyyyyyy',"age" : 26}];_x000D_
_x000D_
const merged = _(arr1) // start sequence_x000D_
  .keyBy('member') // create a dictionary of the 1st array_x000D_
  .merge(_.keyBy(arr2, 'member')) // create a dictionary of the 2nd array, and merge it to the 1st_x000D_
  .values() // turn the combined dictionary to array_x000D_
  .value(); // get the value (array) out of the sequence_x000D_
_x000D_
console.log(merged);

_x000D_

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

_x000D_

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:

_x000D_

const ObjectId = (id) => id; // mock of ObjectId_x000D_
const arr1 = [{"member" : ObjectId("57989cbe54cf5d2ce83ff9d8"),"bank" : ObjectId("575b052ca6f66a5732749ecc"),"country" : ObjectId("575b0523a6f66a5732749ecb")},{"member" : ObjectId("57989cbe54cf5d2ce83ff9d6"),"bank" : ObjectId("575b052ca6f66a5732749ecc"),"country" : ObjectId("575b0523a6f66a5732749ecb")}];_x000D_
const arr2 = [{"member" : ObjectId("57989cbe54cf5d2ce83ff9d6"),"name" : 'xxxxxx',"age" : 25},{"member" : ObjectId("57989cbe54cf5d2ce83ff9d8"),"name" : 'yyyyyyyyyy',"age" : 26}];_x000D_
_x000D_
const merged = [...arr1.concat(arr2).reduce((m, o) => _x000D_
  m.set(o.member, Object.assign(m.get(o.member) || {}, o))_x000D_
, new Map()).values()];_x000D_
_x000D_
console.log(merged);

_x000D_

User · Answer

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    x000D   x000D    mixin   x000D     mergeByKey    function arr1  arr2  key    x000D      var criteria       x000D      criteria key    null  x000D      return   map arr1  function item    x000D        criteria key    item key   x000D        return   merge item    find arr2  criteria    x000D          x000D      x000D      x000D   x000D  var arr1      x000D     member    ObjectId  57989cbe54cf5d2ce83ff9d6     x000D     bank    ObjectId  575b052ca6f66a5732749ecc     x000D     country    ObjectId  575b0523a6f66a5732749ecb    x000D       x000D     member    ObjectId  57989cbe54cf5d2ce83ff9d8     x000D     bank    ObjectId  575b052ca6f66a5732749ecc     x000D     country    ObjectId  575b0523a6f66a5732749ecb    x000D      x000D   x000D  var arr2      x000D     member    ObjectId  57989cbe54cf5d2ce83ff9d8     x000D     name    yyyyyyyyyy   x000D     age   26 x000D       x000D     member    ObjectId  57989cbe54cf5d2ce83ff9d6     x000D     name    xxxxxx   x000D     age   25 x000D      x000D   x000D  var arr3     mergeByKey arr1  arr2   member    x000D   x000D  document body innerHTML   JSON stringify arr3  null  4   x000D  body   font-family  monospace  white-space  pre    x000D   lt script src  https   cdnjs cloudflare com ajax libs lodash js 4 14 0 lodash min js  gt  lt  script gt  x000D   x000D   x000D

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

Examples related to javascript

Examples related to lodash