Merge nested array in object in 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,

dest.arr = _.merge(dest.arr,src.arr)

bugwheels94
– bugwheels94

2016-10-13 17:14:11 +00:00
Commented Oct 13, 2016 at 17:14 — bugwheels94
– bugwheels94, Commented Oct 13, 2016 at 17:14

acontell · Accepted Answer · 2016-10-13 18:05:07Z

5

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.

edited Oct 13, 2016 at 18:05

answered Oct 13, 2016 at 17:58

acontell

6,9321 gold badge22 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Gavin Ang Over a year ago

Thanks! This was what I was looking for.

acontell Over a year ago

@GavinAng Glad to hear it. Please, accept the answer if it's ok with you, thanks!

Gavin Ang Over a year ago

how would this have to change if I need to merge based on the id field in top level (ie. id=865). I realize the above doesn't work if both the src and dest are arrays of objects and I am trying to merge based on id.

guest271314 · Accepted Answer · 2016-10-13 17:54:22Z

0

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

answered Oct 13, 2016 at 17:54

guest271314

1

Comments

meandmax · Accepted Answer · 2016-10-13 18:48:25Z

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

Collectives™ on Stack Overflow

Merge nested array in object in Javascript

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related