在Javascript中合并对象中的嵌套数组

Question

I need to merge 2 objects with nested arrays

var dest = {
  id: "865",
  arr: [{
    id: "123",
    value: "First" }]
};

var src = {
  id: "865",
  arr: [{
    id: "456",
    value: "Second" }]

};

to produce

merge = {
  id: "865",
  arr: [{id: "123",
         value: "First"},
        {id: "456",
         value: "Second"}]
};

I tried using _.merge(dest, src) (using Lodash) and a couple of other methods, but seems like the 2nd object is overwriting the first one because it doesn't handle the nested array the way I want.

What is the best way to do this?

Thanks,

Answer 1

You can use Lodash _.mergeWith method:

var dest = {
  id: "865",
  arr: [{
    id: "123",
    value: "First"
  }]
};

var src = {
  id: "865",
  arr: [{
    id: "456",
    value: "Second"
  }]

};

var merge = _.mergeWith({}, src, dest, function(a, b) {
  if (_.isArray(a)) {
    return b.concat(a);
  }
});
console.log(merge);

It allows you to pass a customizer in order to merge the array in a "custom" way.

Here's the fiddle . Hope it helps.

Answer 2

You can use Object.assign()

 var dest = { id: "865", arr: [{ id: "123", value: "First" }] }; var src = { id: "865", arr: [{ id: "456", value: "Second" }] }; var merge = Object.assign({}, dest); merge.arr.push(Object.assign({}, src.arr[0])); src.arr[0].id = 789; // should not affect `merge.arr` console.log(merge);

Answer 3

Without any libraries.

 var dest = { id: "865", arr: [{ id: "123", value: "First" }] }; var src = { id: "865", arr: [{ id: "456", value: "Second" }] }; // 1 var resultOne = { id: dest.id, arr: src.arr.concat(dest.arr) }; // 2 var resultTwo = Object.assign({}, src, { arr: src.arr.concat(dest.arr) }); // 3 var merge = function(obj1, obj2) { return Object.keys(obj1).reduce(function(result, next) { if (Array.isArray(obj1[next]) && Array.isArray(obj2[next])) { result[next] = obj1[next].concat(obj2[next]); } else if (obj1[next] && obj2[next]) { result[next] = obj2[next]; } return result; }, {}); } console.log(merge(src, dest));