How to merge and group arrays of objects by ids?

Question

I need to unite two arrays with objects with equal id.

const arr1 = [{id: 1, name: 'John'}, {id: 10, name: 'Janny'}, {id: 22, name: 'Mark'}];
const arr2 = [{id: 1, name: 'John', phone: '111'}, {id: 15, name: 'Nick'}, {id: 22, name: 'Mark'}];

The result should be

[
  {id: 1, name: 'John', phone: '111'}, 
  {id: 15, name: 'Nick'},
  {id: 22, name: 'Mark'},
  {id: 10, name: 'Janny'}
]

I tried to use lodash _.isEqual(arr1, arr2) but it's not working, because {id: 1, name: 'John', phone: '111'} is not equal to {id: 1, name: 'John'}.

Linked post only works on two objects with the same keys. Trying to reopen this thread based on false duplicate. — Wimanicesir, Jan 28 '22 at 10:03

score 4 · Accepted Answer · answered Jan 28 '22 at 10:15

You can combine the elements in the arrays, group them by id using a map or an object, and get the values:

const arr1 = [
  { id: 1, name: 'John' },
  { id: 10, name: 'Janny' },
  { id: 22, name: 'Mark' },
];
const arr2 = [
  { id: 1, name: 'John', phone: '111' },
  { id: 15, name: 'Nick' },
  { id: 22, name: 'Mark' },
];

const result = [
  ...[...arr1, ...arr2]
    .reduce(
      (acc, curr) => acc.set(curr.id, { ...acc.get(curr.id), ...curr }),
      new Map()
    )
    .values(),
];
console.log(result)

score 1 · Answer 2 · answered Jan 28 '22 at 10:25

here is a very stupid and long way to do it:

const arr1 = [{id: 1, name: 'John'}, {id: 10, name: 'Janny'}, {id: 22, name: 'Mark'}];
const arr2 = [{id: 1, name: 'John', phone: '111'}, {id: 15, name: 'Nick'}, {id: 22, name: 'Mark'}];
let newArr = [];
firstLoop: for(let i=0; i < arr1.length; i++){
    for(let j =0; j < arr2.length; j++){
        if(arr1[i].id == arr2[j].id){
            newArr.push({...arr1[i], ...arr2[j]})
            continue firstLoop;
        }
    }
    newArr.push(arr1[i])
}
firstLoop: for(let i=0; i < arr1.length; i++){
    for(let j =0; j < arr2.length; j++){
        if(arr2[i].id == arr1[j].id){
            // newArr.push({...arr1[i], ...arr2[j]})
            continue firstLoop;
        }
    }
    newArr.push(arr2[i])
}
console.log(newArr);

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Jan 28 '22 at 11:06

How to merge and group arrays of objects by ids?

2 Answers2