how to merge two arrays of objects in javascript?

Question

here is a sample example where there are two arrays and we have a merge() to which we pass the arrays. the merge() should return the merged array such that it should merge the objects which have same name.

let arr1 = [
  {
    name: "Person1",
    age: 20
  },
  {
    name: "Person2",
    age: 30
  }
]


let arr2 = [
  {
    name: "Person1",
    email: "person1@mail.com"
  },
  {
    name: "Person3",
    age: 25
  }
]


arr3 = merge(arr1, arr2)

output : 
arr3 should be : 
[
 {
    name: "Person1",
    age: 20,
    email: "person1@mail.com"
  },
   {
    name: "Person2",
    age: 30
  },
   {
    name: "Person3",
    age: 25
  }
]

Answer 1

    let a = [
               {
                name: "Person15",
                age: 29
               },
               {
              name: "Person20",
          age: 39
         }
        ];;

            let b =  [
               {
                name: "Person1",
                age: 20
               },
               {
              name: "Person2",
          age: 30
         }
        ];

            // b diff a
            let resultA = b.filter(
              elm =>
                !a
                  .map(elm => JSON.stringify(elm)).includes(JSON.stringify(elm)),
            );

            // a diff b
            let resultB = a.filter(
              elm =>
                !b
                  .map(elm => JSON.stringify(elm)).includes(JSON.stringify(elm)),
            );

            // show merge
            
            const mergedArray = [ ...resultA, ...resultB ]


            const mergedArrays = [ ...b, ...mergedArray ]

            let newData = [
              ...new Map(mergedArrays.map(item => [item.id, item])).values(),
            ];
            console.log(newData);

Answer 2

Try this :

let arr1 = [{
    name: "Person1",
    age: 20
}, {
    name: "Person2",
    age: 30
}];
let arr2 = [{
    name: "Person1",
    email: "person1@mail.com"
}, {
    name: "Person3",
    age: 25
}];
function copy(source, destination) {
    for (let prop in source) {
        destination[prop] = source[prop];
    }
}
function merge(arr1, arr2) {
    let newArray = [];
    for (let i = 0, obj1; obj1 = arr1[i]; ++i) {
        let obj = {};
        copy(obj1, obj);
        for (let j = 0, obj2; obj2 = arr2[j]; ++j) {
            if (obj1.name === obj2.name) {
                copy(obj2, obj);
            }
        }
        newArray.push(obj);
    }
    for (let i = 0, obj2; obj2 = arr2[i]; ++i) {
        let here = false;
        for (let j = 0, obj1; obj1 = arr1[j]; ++j) {
            if (obj1.name === obj2.name) {
                here = true;
            }
        }
        if (!here) {
            newArray.push(obj2);
        }
    }
    return newArray;
}
let arr3 = merge(arr1, arr2);
console.log(arr3);

Answer 3

You could take an object as hash table for keeping track of merged objects with same name and return only the values from the hash table.

const
    merge = (...arrays) => {
        const merged = {};
        
        arrays.forEach(data =>
            data.forEach(o => Object.assign(merged[o.name] ??= {}, o))
        );
        
        return Object.values(merged);
    },
    array1 = [{ name: "Person1", age: 20 }, { name: "Person2", age: 30 }],
    array2 = [{name: "Person1", email: "person1@mail.com" }, { name: "Person3", age: 25 }],
    result = merge(array1, array2);

console.log(result);

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

Answer 4

We can convert the arrays into objects for better time complexity and merge them using a spread operator and generate the array at the end.

let arr1 = [
  {
    name: "Person1",
    age: 20
  },
  {
    name: "Person2",
    age: 30
  }
]


let arr2 = [
  {
    name: "Person1",
    email: "person1@mail.com"
  },
  {
    name: "Person3",
    age: 25
  }
]
function merge(arr1, arr2){
  const merged_dict = {}
  const r_arr = []
  const arr = [...arr1,...arr2]
  arr.forEach(ele => {
    if(merged_dict[ele.name]){
      merged_dict[ele.name] = {...merged_dict[ele.name],...ele};
    }
    else{
      merged_dict[ele.name] = ele;
    }
  });
  for(let key in merged_dict){
    r_arr.push(merged_dict[key])
  }
  return r_arr
}

arr3 = merge(arr1, arr2)
console.log(arr3)

Answer 5

The map part covers every item in arr1, so you can add it as is or merge with the ones both in arr1 and arr2. Then you need a final pass to add those that are in arr2 but not in arr1

let arr1 = [
  {
    name: "Person1",
    age: 20
  },
  {
    name: "Person2",
    age: 30
  }
]


let arr2 = [
  {
    name: "Person1",
    email: "person1@mail.com"
  },
  {
    name: "Person3",
    age: 25
  }
]

const merge = (a1,a2) => {

return a1.map( (x) => {
  const y = a2.find( item => x.name === item.name);
  if (y) {
    return Object.assign({},x,y);
  } else
    return x
}).concat(a2.filter(item => a1.every( x => x.name !== item.name)));




}

arr3 = merge(arr1, arr2)

console.log(arr3)

Answer 6

You can use lodash for that

let arr1 = [
  {
    name: "Person1",
    age: 20
  },
  {
    name: "Person2",
    age: 30
  }
]


let arr2 = [
  {
    name: "Person1",
    email: "person1@mail.com"
  },
  {
    name: "Person3",
    age: 25
  }
]


arr3 = _.merge(_.keyBy(arr1, 'name'), _.keyBy(arr2, 'name'));

console.log(arr3)

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

Answer 7

  let arr1 = [
  {
   name: "Person1",
   age: 20
},
 {
 name: "Person2",
 age: 30
 }
]
 
let arr2 = [
 {
  name: "Person1",
  email: "person1@mail.com"
},
 {
   name: "Person3",
   age: 25
  }
] 


var arr3 = [...arr1,...arr2]