How to concatenate two object with array properties in JavaScript?

Question

I have two objects:

var one = {
  addedItems: [0, 1],
  removedItems: [8, 9],
  oneTwo: false,
  someStuff: {
    anotherArray: ['a', 'b']
  }
};

var two = {
  addedItems: [3, 4],
  removedItems: [6, 7],
  someStuff: {
    anotherArray: ['c', 'd']
  }
};

And in the end I need to merge these two objects and get something like this:

{
  addedItems: [0, 1, 3, 4],
  removedItems: [8, 9, 6, 7],
  oneTwo: false,
  someStuff: {
    anotherArray: ['a', 'b', 'c', 'd']
  }
}

The operation should be performed on objects with different structure.

What is the best way (or just possible way) to do this? Are there any methods in jQuery or underscore/lodash that allow to do this?

To clarify... if both objects have a property that is an array, you want to merge the 2 into each other... however what happens if a.foo:true and b.foo:false which one takes precedence when the values are atomic? Likewise if the values in the array contain duplicates do you want duplicates or just unique values? — scunliffe
– scunliffe, Commented Mar 7, 2017 at 14:21
The last one. For example if we have doConcatenation(one, two), the property from "two" will be the result property. — Vladimir Mironov
– Vladimir Mironov, Commented Mar 7, 2017 at 14:23
The concept is known as deep merging, and there is an excellent deepmerge library. Here is a blog (published yesterday) about it. — lonesomeday
– lonesomeday, Commented Mar 7, 2017 at 14:26

Nico Van Belle · Accepted Answer · 2019-08-23 07:01:30Z

6

Did you check Lodash _.mergeWith(object, sources, customizer) method? I think the example does what you are basically expecting.

https://lodash.com/docs/4.17.15#mergeWith

var one = { addedItems: [0, 1], removedItems: [8, 9], oneTwo: false, someStuff: { anotherArray: ['a', 'b'] } },
    two = { addedItems: [3, 4], removedItems: [6, 7], someStuff: { anotherArray: ['c', 'd'] } };

// In case of arrays, concatenate them instead
function customizer(objValue, srcValue) {
  if (_.isArray(objValue)) {
    return objValue.concat(srcValue);
  }
}

var result = _.mergeWith(one, two, customizer);

Here's the working example in Fiddle

edited Aug 23, 2019 at 7:01

answered Mar 7, 2017 at 14:26

Nico Van Belle

5,2044 gold badges36 silver badges55 bronze badges

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

Comments

Nina Scholz · Accepted Answer · 2017-03-07 14:23:11Z

You could generate a new object and append arrays with the items from the already inserted array.

function deepMerge(source, target) {
    Object.keys(source).forEach(function (k) {
        if (Array.isArray(source[k])) {
            if (!Array.isArray(target[k])) {
                target[k] = [];
            }          
            target[k] = target[k].concat(source[k]);
            return;
        }
        if (source[k] && typeof source[k] === 'object') {
            target[k] = target[k] || {};
            deepMerge(source[k], target[k]);
            return;
        }
        target[k] = source[k];
    });
}

var one = { addedItems: [0, 1], removedItems: [8, 9], oneTwo: false, someStuff: { anotherArray: ['a', 'b'] } },
    two = { addedItems: [3, 4], removedItems: [6, 7], someStuff: { anotherArray: ['c', 'd'] } },
    result = {};

deepMerge(one, result);
deepMerge(two, result);

console.log(result);

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

Collectives™ on Stack Overflow

How to concatenate two object with array properties in JavaScript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related