javascript - es6 merge two array of objects and override the existing object - Stack Overflow

admin管理员组

文章数量:1193751

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

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

• javascript
• arrays
• merge
• ecmascript-6

Share Improve this question Follow edited Dec 4, 2017 at 10:48 Ashy Ashcsi asked Nov 29, 2017 at 14:06 Ashy AshcsiAshy Ashcsi 1,59777 gold badges2929 silver badges6363 bronze badges 3

• How are you going to remove {'2':'no'}? – moon Commented Nov 29, 2017 at 14:07
• 2 This datastrucure is so ugly. – Jonas Wilms Commented Nov 29, 2017 at 14:08
• Why are you using different keys in each object? – charlietfl Commented Nov 29, 2017 at 14:09

Add a comment  | 

9 Answers 9

Sorted by: Reset to default 6

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);

const result = Object.entries(Object.assign({}, ...arr1,...arr2)).map(([key, value]) => ({[key]:value}));

You could spread (...) the arrays into one resulting object ( via Object.assign) and then map its entries to an array again.

You could work with a valid ES6 data structure like a map for example:

const 1 = { 1: { string: 'yes' }, 2: { string: 'no' } } const 2 = { 2: { string: 'yes' }, 3: { string: 'no' } } const 3 = { ...1, ...2}

This will override your first argument with the second one or just combine them where possible. Just try it out in your browser it's a lot easier and enhances performance since you will never have to use findById() which is an expensive operation.

In javascript, arrays are simply objects indexed by numbers starting from 0.

So when you use Object.assign on arr1 and arr2 you will override the first item in the arr1 with the first item in arr2 because they are both indexed under the key 0.

your result will be:

[
 { '2': 'yes' },
 { '2': 'no' }
]

(or in object syntax:)

{ 
 0: { '2': 'yes' },
 1: { '2': 'no' }
}

Instead of using arrays, you could create an object indexed by the number string (which is how you seem to be thinking of the array in any case).

So you could change your original data structure to make the job easier:

const arr1 = {
  '1': 'yes',
  '2': 'no'
};

const arr2 = {
  '2': 'yes'
};

const result = Object.assign(arr1, arr2);

You could take a Map as reference to the new assigned object in the result array and build first a new array with a copy of the objects and then iterate the second array and update the objects with the same key.

var array1 = [{ 1: 'yes' }, { 2: 'no' }],
    array2 = [{ 2: 'yes' }],
    getKey = o => Object.keys(o)[0],
    map = new Map,
    result = array1.map(o => (k => map.set(k, Object.assign({}, o)).get(k))(getKey(o)));

array2.forEach(o => Object.assign(map.get(getKey(o)), o));

console.log(result);

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

Array reduce could come in handy is this case. See example below:

[...arr1, ...arr2].reduce((acc, item) => {
  const updated = acc.find(a => a.id === item.id)
  if (!updated) {
    acc.push(item)
  } else {
    const index = acc.indexOf(updated)
    acc[index] = { ...item, ...acc[index] }
  }
  return acc
}, [])

simple way to add with exist array of object:

const arr1 = [{ "name":"John", "age":30, "car":"toyata" }];
const arr2 = [{ "name":"Ales", "age":40, "car":"Nissan" }];
Array.prototype.push.apply(arr1, arr2);

Result:=>
console.log(arr1)

For anyone finding this answer at a later point in time. There are a couple of ways that you could want this to work exactly, but you could filter all adjusted elements in the first array, and then combine it with the second array.

const arr3 = [...arr1.filter(item1 => !arr2.find(item2 => item1.id === item2.id)), ...arr2]

Alternatively, you could update the elements in the first array, and then filter them from the second array instead.

You cannot use array.prototype map because the key of arr1 and arr2 have the same value '2'.

You should use something like this

for (var i = 0, l = arr1.length; i < l; i++) {
 var key = Object.keys(arr1[i]);
 if (!arr2[key]) { arr2[key] = []; }
 arr2[key].push(arr1[i][key]);
}

Regards

本文标签： javascriptes6 merge two array of objects and override the existing objectStack Overflow