Merge objects containg array of objects

Question

I have two deeply nested objects containing arrays and objects within those arrays. I'd like to merge those. Using 'lodash' it doesn't recognize my objects within arrays.

I have this:

var defaults = {
    rooms: [
        {
            name: 'livingroom',
            color: 'white'
        },
        {
            name: 'bedroom',
            color: 'red'
        }
    ],
    people: {
        clothes: [
            {
                fabric: 'wool',
                color: 'black'
            },
            {
                fabric: 'jeans',
                color: 'blue'
            }
        ]
    }
}

var specific = {
    people: {
        wigs: [
            {
                shape: 'trump'
            }
        ]
    },
    furniture : {
        foo: 'bar'
    }
}

the result should look like this:

var merged = {
    rooms: [
        {
            name: 'livingroom',
            color: 'white'
        },
        {
            name: 'bedroom',
            color: 'red'
        }
    ],
    people: {
        clothes: [
            {
                fabric: 'wool',
                color: 'black'
            },
            {
                fabric: 'jeans',
                color: 'blue'
            }
        ],
        wigs: [
            {
                shape: 'trump'
            }
        ]
    },
    furniture : {
        foo: 'bar'
    }
}

using lodash

const _ = require('lodash');
console.log(_.merge({}, specific, defaults));

i get

{ people: { wigs: [ [Object] ], clothes: [ [Object], [Object] ] },
  furniture: { foo: 'bar' },
  rooms:
   [ { name: 'livingroom', color: 'white' },
     { name: 'bedroom', color: 'red' } ] }

this is related to:

Merge Array of Objects by Property using Lodash

How to merge two arrays in JavaScript and de-duplicate items

because I don't have a common index or name I'm a bit lost.

do you need to keep the object, or is it ok to mutate the objects? — Nina Scholz
– Nina Scholz, Commented Mar 1, 2019 at 11:09
Lodash's _.merge() works for your case - jsfiddle.net/py4h830d . Look at the brower's console. — Ori Drori
– Ori Drori, Commented Mar 1, 2019 at 11:16
OriDrori you're right. I'm still new to js and had (only) issues with console.log() :-) However I like the Answer from Nina Scholz as it doesn't require lodash. I hope that's fine if I accept her answer :) — Simon
– Simon, Commented Mar 1, 2019 at 12:26

Nina Scholz · Accepted Answer · 2019-03-01 12:13:03Z

2

You could merge specific to defaults by looking at object or arrays.

function merge(a, b) {
    Object.keys(b).forEach(k => {
        if (!(k in a)) {
            a[k] = b[k];
            return;
        }
        if ([a, b].every(o => o[k] && typeof o[k] === 'object' && !Array.isArray(o[k]))) {
            merge(a[k], b[k]);
            return;
        }
        if (!Array.isArray(a[k])) a[k] = [a[k]];
        a[k] = a[k].concat(b[k]);
    });
    return a;
}

var defaults = { rooms: [{ name: 'livingroom', color: 'white' }, { name: 'bedroom', color: 'red' }], people: { clothes: [{ fabric: 'wool', color: 'black' }, { fabric: 'jeans', color: 'blue' }] } },
    specific = { people: { wigs: [{ shape: 'trump' }] }, furniture: { foo: 'bar' } };

[defaults, specific].reduce(merge);

console.log(defaults);

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

edited Mar 1, 2019 at 12:13

answered Mar 1, 2019 at 11:17

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

5 Comments

adiga Over a year ago

IIUC, this won't merge primitive properties like number and string no?

Nina Scholz Over a year ago

it generates an array and pushes a value.

adiga Over a year ago

Oh, you're right. I think a[k].push(k) should be a[k].push(b[k]). Also, a separate check for array might be required. If both of the objects have rooms, then it will become a 2D array because of the push

adiga Over a year ago

I think this should do it: a[k] = a[k].concat(b[k]);

Simon Over a year ago

Thank you Nina and adiga - beautiful :)

Collectives™ on Stack Overflow

Merge objects containg array of objects

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related