deep merge with concatenating arrays in javascript

Question

I want to deep merge 2 javascript objects with similar properties in a reducer. The catch is the two objects have arrays as their properties and I need them to be concatenated instead of replaced. Basically something like this:

var x = {
  name: 'abc',
  family: {
    children: [
      {name: 'xxx'},
      {name: 'zzz'}
    ]
  }
};

var y = {
  name: 'abc',
  family: {
    children: [
      {name: 'yyy'}
    ]
  }
};

will result on

var y = {
  name: 'abc',
    family: {
      children: [
        {name: 'xxx'}, {name: 'zzz'}, {name: 'yyy'}
      ]
    }
  };

any suggestion? I prefer lodash based solution if possible. Also, since it's in reducer, I cannot just replace the property with new object

what if `x` and `y` objects would have different `name` property value on the parent level? — RomanPerekhrest, Jan 26 '17 at 08:36
in my specific case name can be replaced with source objects — Daniel W, Jan 26 '17 at 08:41

RomanPerekhrest · Answer 1 · 2017-01-26T08:43:18.403

0

objects have arrays as their properties and I need them to be concatenated instead of replaced

For your simple example it would be enough to use Array.prototype.concat() function:

var x = {name: 'abc', family:{children:[{name: 'xxx'}, {name: 'zzz'} ] }}, y = {name: 'abc', family: {children: [{name: 'yyy'}]}};

y.family.children = y.family.children.concat(x.family.children);
console.log(y);

edited Jan 26 '17 at 08:43

answered Jan 26 '17 at 08:40

RomanPerekhrest

88,541
4
65
105

as I mentioned, I used this in reducer, so I cannot change property in y. I need to replace it with whole object, hence the merge process – Daniel W Jan 26 '17 at 08:43
@DanielW, why don't you post that *reducer* ? – RomanPerekhrest Jan 26 '17 at 08:44

score 0 · Answer 2 · edited May 23 '17 at 12:01

If you're already using lodash, check if mergeWith doesn't do what you want... (see this so answer for example).

Anyway here is a quick function that should do what you want. Be warned that it does very little in terms of checking, and only merges properties that are in the first object (since you said that your objects are similar).

Also it doesn't mutate the objects but instead creates a new one.

function merge(a, b){
  var ret = {};
  for(prop in a){ 
    //assume b doesn't have properties that a hasn't
    //only merge on similar types, else keep a
    var propA = a[prop],
        propB = b[prop];
    console.log(prop, typeof propA)
    if( (typeof propA == typeof propB) && (typeof propA == "object")){
      if(Array.isArray(propA)){
        ret[prop] = propA.concat(propB);
      }else{
        ret[prop] = merge(propA, propB);
      }
    }else{
      ret[prop] = propA;
    }
  }
  return ret;
}
var x = {
  name: 'abc',
  family: {
    children: [
      {name: 'xxx'},
      {name: 'zzz'}
    ]
  }
};

var y = {
  name: 'abc',
  family: {
    children: [
      {name: 'yyy'}
    ]
  }
};

console.log(merge(x, y));
console.log(merge(y, x));

score 0 · Answer 3 · answered Jan 26 '17 at 09:02

I assume one of your objects is the state you want to change in your reducer.

What about:

return Object.assign({}, x, {
   family: [...x.family, ...y.family]
  })

First this creates a new empty object and assigns x ( your old state ) to it. Afterwards it assigns the family which it overrides in the new object. The ... represents all elements in an array, so this can be used to concat the arrays.

deep merge with concatenating arrays in javascript

3 Answers3