I have two arrays of objects.

arr1 = [
  {
    myName: 'Adam',
    mySkill: 'CSS',
  },
  {
    myName: 'Mutalib',
    mySkill: 'JavaScript',
  },
];

arr2 = [
  {
    myName: 'Adam',
    myWeight: '112',
  },
  {
    myName: 'Habib',
    myWeight: '221',
  },
];

The result I want is an array that contains objects of first array that have a matching property "myName" in second array, with the additional properties of the corresponding second array object.

result = [
  {
    myName = 'Adam'
    mySkill = 'CSS'
    myWeight = '112'
  }
];

I have two arrays of objects.

arr1 = [
  {
    myName: 'Adam',
    mySkill: 'CSS',
  },
  {
    myName: 'Mutalib',
    mySkill: 'JavaScript',
  },
];

arr2 = [
  {
    myName: 'Adam',
    myWeight: '112',
  },
  {
    myName: 'Habib',
    myWeight: '221',
  },
];

The result I want is an array that contains objects of first array that have a matching property "myName" in second array, with the additional properties of the corresponding second array object.

result = [
  {
    myName = 'Adam'
    mySkill = 'CSS'
    myWeight = '112'
  }
];

• javascript
• arrays
• collections
• lodash

5 Answers 5

The solution below groups the concatenated array (arr1 and arr2) by myName, removes all groups that only contains one item using reject, and lastly use map to merge the resulting array.

var result = _(arr1)
  .concat(arr2)
  .groupBy('myName')
  .reject({ length: 1 })
  .map(_.spread(_.merge))
  .value();

var arr1 = [
  {
    myName: 'Adam',
    mySkill: 'CSS',
  },
  {
    myName: 'Mutalib',
    mySkill: 'JavaScript',
  }
];

var arr2 = [
  {
    myName: 'Adam',
    myWeight: '112',
  },
  {
    myName: 'Habib',
    myWeight: '221',
  }
];

var result = _(arr1)
  .concat(arr2)
  .groupBy('myName')
  .reject({ length: 1 })
  .map(_.spread(_.merge))
  .value();

console.log(result);

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

An alternative solution is to use intersectionWith to get the intersection between two arrays and assign the missing values at the same time. Note the use of cloneDeep to promote immutability.

var result = _.intersectionWith(_.cloneDeep(arr1), arr2, function(x, y) {
  return x.myName === y.myName && _.assign(x, y);
});

var arr1 = [
  {
    myName: 'Adam',
    mySkill: 'CSS',
  },
  {
    myName: 'Mutalib',
    mySkill: 'JavaScript',
  }
];

var arr2 = [
  {
    myName: 'Adam',
    myWeight: '112',
  },
  {
    myName: 'Habib',
    myWeight: '221',
  }
];

var result = _.intersectionWith(_.cloneDeep(arr1), arr2, function(x, y) {
  return x.myName === y.myName && _.assign(x, y);
});
  
console.log(result);

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

Alternative native JS solution using Array.prototype.forEach and Object.assign functions:

var arr1 = [
    { myName: 'Adam', mySkill: 'CSS'}, { myName: 'Mutalib', mySkill: 'JavaScript'},
  ],

  arr2 = [
    { myName: 'Adam', myWeight: '112'}, { myName: 'Habib', myWeight: '221'}
  ],
  result = [];
  
arr1.forEach(function (o) {
    arr2.forEach(function (c) {
        if (o.myName === c.myName) result.push(Object.assign({}, o, c));
    })
});

console.log(result);

You could use a hash table and push the object only if myName is mon.

var arr1 = [{ myName: 'Adam', mySkill: 'CSS' }, { myName: 'Mutalib', mySkill: 'JavaScript' }],
    arr2 = [{ myName: 'Adam', myWeight: '112' }, { myName: 'Habib', myWeight: '221' }],
    hash = Object.create(null),
    result = [];

arr1.forEach(function (a) {
    hash[a.myName] = { myName: a.myName, mySkill: a.mySkill };
});

arr2.forEach(function (a) {
    if (hash[a.myName]) {
        hash[a.myName].myWeight = a.myWeight;
        result.push(hash[a.myName]);
    }
});

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

You may also do as follows with the help of a Map object.

function mergeObjectsIfExists(p,a,b){
  var m = a.reduce((m,o) => m.set(o[p],o), new Map());
  return b.reduce((r,o) => m.has(o[p]) ? (r.push(m.set(o[p],Object.assign(m.get(o[p]),o)).get(o[p])),r)
                                       : r, []);
}

var arr1 = [{ myName: 'Adam', mySkill: 'CSS'}, { myName: 'Mutalib', mySkill: 'JavaScript'}, { myName: 'Jessuro', mySkill: 'Haskell'}],
    arr2 = [{ myName: 'Adam', myWeight: '112'}, { myName: 'Habib', myWeight: '221'}, { myName: 'Jessuro', myIQ: '150'}],
  result = mergeObjectsIfExists("myName",arr1,arr2);

console.log(result);

If using lodash/fp you could pose functions to achieve what you want. Assuming myName is your PK (or merge pivot), you could do:

const mergeByName = pose(values, spread(merge), map(keyBy('myName')));

> mergeByName([arr1, arr2])
[ { myName: 'Adam', mySkill: 'CSS', myWeight: '112' },
  { myName: 'Mutalib', mySkill: 'JavaScript' },
  { myName: 'Habib', myWeight: '221' } ]