es6 merge two array of objects and override the existing object

Question

I have 2 array of objects:

const arr1 = [{'id':'1' 'value':'yes'}, {'id':'2', 'value':'no'}];
const arr2 = [{'id':'2', 'value':'yes'}];

So, if I try and merge these 2 arrays the result should be:

arrTemp = [{'id':'1', 'value':'yes'}, {'id':'2', 'value':'yes'}];

Basically, it should work similar to Object.assign(), but no matter what I try it does not work. Could anyone please help me in this ?

I modified the data structure. Is it possible to merge them now and get the output.

Thanks

Answer 1

This is how you can get the job done with ES6 spread, reduce and Object.values.

const arr1 = [{
  'id': '1',
  'value': 'yes'
}, {
  'id': '2',
  'value': 'no'
}];
const arr2 = [{
  'id': '2',
  'value': 'yes'
}];

const result = Object.values([...arr1, ...arr2].reduce((result, {
  id,
  ...rest
}) => {
  result[id] = {
    ...(result[id] || {}),
    id,
    ...rest
  };
  return result;
}, {}));

console.log(result);