8

Suppose you have two objects: 

var foo = {
    a : 1,
    b : 2
};

var bar = {
    a : 3,
    b : 4
}

What's the best way to merge them (and allow deep merging) to create this:

var foobar = {
    a : [1, 3],
    b : [2, 4]
}

Edit for question clarification: Ideally, in the case of an existing property in one and not the other, I would expect an array to still be created, for normalization purposes and to allow for further reduction of the map, however the answers I'm seeing below are more than sufficient. For the purposes of this exercise, I was only looking for string or numerical merges, so I hadn't entertained every possible situational case. If you held a gun to my head and asked me to make a choice, though, I'd say default to arrays.

Thanks all for your contributions.

Improve this question
3
  • 3
    If foo has a property c:5 but bar does not... does foobar have the property copied directly from foo? or does it have c:[5]? Commented Sep 26, 2011 at 0:32
  • Are you interested only in own properties or inherited properties too? And I noticed you tagged it with jQuery and extend. Are you thinking a solution uses jquery.extend as a basis? Commented Sep 26, 2011 at 0:36
  • You should be a bit more specific with what you want to happen for the various cases you're asking to account for. What do you mean deep merging? RobG's answer seems like exactly what you want Commented Sep 26, 2011 at 0:39

4 Answers 4

Reset to default
10

This ought to do what you're looking for. It will recursively merge arbitrarily deep objects into arrays.

// deepmerge by Zachary Murray (dremelofdeath) CC-BY-SA 3.0
function deepmerge(foo, bar) {
  var merged = {};
  for (var each in bar) {
    if (foo.hasOwnProperty(each) && bar.hasOwnProperty(each)) {
      if (typeof(foo[each]) == "object" && typeof(bar[each]) == "object") {
        merged[each] = deepmerge(foo[each], bar[each]);
      } else {
        merged[each] = [foo[each], bar[each]];
      }
    } else if(bar.hasOwnProperty(each)) {
      merged[each] = bar[each];
    }
  }
  for (var each in foo) {
    if (!(each in bar) && foo.hasOwnProperty(each)) {
      merged[each] = foo[each];
    }
  }
  return merged;
}

And this one will do the same, except that the merged object will include copies of inherited properties. This probably isn't what you're looking for (as per RobG's comments below), but if that is actually what you are looking for, then here it is:

// deepmerge_inh by Zachary Murray (dremelofdeath) CC-BY-SA 3.0
function deepmerge_inh(foo, bar) {
  var merged = {};
  for (var each in bar) {
    if (each in foo) {
      if (typeof(foo[each]) == "object" && typeof(bar[each]) == "object") {
        merged[each] = deepmerge(foo[each], bar[each]);
      } else {
        merged[each] = [foo[each], bar[each]];
      }
    } else {
      merged[each] = bar[each];
    }
  }
  for (var each in foo) {
    if (!(each in bar)) {
      merged[each] = foo[each];
    }
  }
  return merged;
}

I tried it out with your example on http://jsconsole.com, and it worked fine:

deepmerge(foo, bar)
{"a": [1, 3], "b": [2, 4]}
bar
{"a": 3, "b": 4}
foo
{"a": 1, "b": 2}

Slightly more complicated objects worked as well:

deepmerge(as, po)
{"a": ["asdf", "poui"], "b": 4, "c": {"q": [1, 444], "w": [function () {return 5;}, function () {return 1123;}]}, "o": {"b": {"t": "cats"}, "q": 7}, "p": 764}
po
{"a": "poui", "c": {"q": 444, "w": function () {return 1123;}}, "o": {"b": {"t": "cats"}, "q": 7}, "p": 764}
as
{"a": "asdf", "b": 4, "c": {"q": 1, "w": function () {return 5;}}}
Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

Missing a } after the first else, but besides that, works well. Kudos.
Ack! Good catch. Sorry about that. I fixed it when I copy/pasted into jsconsole, but forgot to get that back into my other buffer. Thanks again for pointing that out -- I fixed it :)
I would expect a function that merges "objects into arrays" to have an array for each property, not a mix of strings, objects, functions and so on. It also doesn't fitler out inhertied properties, nor deal with functions that have own properties.
If you were merging two objects of completely different types, then perhaps you would actually want inherited properties in your merge result. Also, I fail to see how dealing with functions would increase the value in this solution. It sounds like that would be a more specific solution anyway, and I was aiming for more of a generic solution that just worked. If you wanted that functionality, it wouldn't be hard to modify the above code to do what you wanted. I just wanted to answer the question and not assume anything else :)
@Zach - the OP hasn't said what type of objects should or shouldn't be dealt with. It's a good idea to point out limitations or assumptions so the OP can make a more informed evaluation. As for inherited properties, it doesn't seem like a good idea to copy them (but again, no explicit requirement either way).
|
3

Presumably you would iterate over one object and copy its property names to a new object and values to arrays assigned to those properties. Iterate over subsequent objects, adding properties and arrays if they don't already exist or adding their values to existing properties and arrays.

e.g.

function mergeObjects(a, b, c) {
  c = c || {};
  var p;

  for (p in a) {
    if (a.hasOwnProperty(p)) {
      if (c.hasOwnProperty(p)) {
        c[p].push(a[p]);
      } else {
        c[p] = [a[p]];
      }
    }
  }
  for (p in b) {
    if (b.hasOwnProperty(p)) {
      if (c.hasOwnProperty(p)) {
        c[p].push(b[p]);
      } else {
        c[p] = [b[p]];
      }
    }
  }
  return c;
}

You could modify it to handle any number of objects by iterating over the arguments supplied, but that would make passing the object to merge into more difficult.

Improve this answer

6 Comments

I assumed that was obvious and not what the question was asking for
Fine, so what is your answer? There is nothing in the OP on how to handle deep merging, perhaps further information will be revealed in response...
@Walkerneo - presumably the OP doesn't want to copy inherited properties nor add them to inherited properties if the (possibly) supplied object.
@Walkerneo, hasOwnProperty just makes sure it is not an inherited property.
I retract my statement then. I'll go look up what an inherited property is. edit: OK, sorry about that. I forgot about that.
|
2

https://lodash.com/docs/3.10.1#merge

    // using a customizer callback
var object = {
  'fruits': ['apple'],
  'vegetables': ['beet']
};

var other = {
  'fruits': ['banana'],
  'vegetables': ['carrot']
};

_.merge(object, other, function(a, b) {
  if (_.isArray(a)) {
    return a.concat(b);
  }
});
// → { 'fruits': ['apple', 'banana'], 'vegetables': ['beet', 'carrot'] }

Improve this answer

1 Comment

I know this answer requires Lodash to be installed, but I don't see why it needed to be down voted. This was the only one that worked for me and was the cleanest!
0

I just leave it here. Shallow merging with values as arrays.

const foo = {a: 1, b: 2}
const bar = {a: 2, с: 4}
const baz = {a: 3, b: 3}

const myMerge = (...args) => args
  .flatMap(Object.entries)
  .reduce((acc, [key, value]) => {
    acc[key] ??= []
    acc[key].push(value)
    return acc
  }, {})

console.log(myMerge(foo, bar, baz))
//{ a: [1, 2, 3],
//  b: [2, 3],
//  с: [4] }
.as-console-wrapper { max-height: 100% !important; top: 0 }

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.