JavaScript Concatenate Nested Objects Spread Operator

Question

I have the following example code.

var myObj1 = {
    name: {
        first: "First",
        last: "Last"
    }
};

var myObj2 = {
    name: {
        first: "Other",
        middle: "Middle"
    }
};

var myMainObj = {
    ...myObj1,
    ...myObj2
};

console.log(myMainObj);

I expect myMainObj to be the following:

{
    name: {
        first: "Other",
        middle: "Middle",
        last: "Last"
    }
}

But myMainObj ends up being:

{
    name: {
        first: "Other",
        middle: "Middle"
    }
}

So I have two objects. I want to basically combine them, and have the ability to assign priority to one of the objects over another.

Both objects come from external sources, so the structure and data is not guaranteed, and I have to account for the data being in different structure.

How can I do this easily since the spread operator only works for the root level of the object?

I am looking for the cleanest and easiest solution to do this.

Arup Rakshit · Accepted Answer · 2018-09-11 20:27:28Z

3

You can use .merge method from lodash lib for this. The work already done by lodash maintainers, no need to reinvent the wheel, just use their lib.

This method is like _.assign except that it recursively merges own and inherited enumerable string keyed properties of source objects into the destination object.

var myObj1 = {
    name: {
        first: "First",
        last: "Last"
    }
};

var myObj2 = {
    name: {
        first: "Other",
        middle: "Middle"
    }
};

var myMainObj = _.merge({}, myObj1, myObj2)

console.log(myMainObj);

<script src="https://cdn.jsdelivr.net/lodash/4/lodash.min.js"></script>

edited Sep 11, 2018 at 20:27

answered Sep 11, 2018 at 20:24

Arup Rakshit

119k30 gold badges270 silver badges328 bronze badges

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

2 Comments

Charlie Fish Over a year ago

In this example myObj1 takes priority over myObj2 because of the order in the _.merge?

Arup Rakshit Over a year ago

@CharlieFish Yes.

Derek 朕會功夫 · Accepted Answer · 2018-09-11 20:21:19Z

2

This should do:

var myMainObj = {
    name: {
        ...myObj1.name,
        ...myObj2.name
    }
};

You will have to implement your own merger if you need to perform a deeper merge.

answered Sep 11, 2018 at 20:21

Derek 朕會功夫

94.8k45 gold badges199 silver badges255 bronze badges

2 Comments

Charlie Fish Over a year ago

Sorry, I forgot to mention that both objects come from external sources. So they could be super random objects.

Derek 朕會功夫 Over a year ago

In that case, you will have to recursively loop through everything and merge them.

Collectives™ on Stack Overflow

JavaScript Concatenate Nested Objects Spread Operator

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related