How to merge two nested objects in javascript

Question

I tried to merge using this way but it making two different keys of meta_information and meta_information.image

merchant = Object.assign(merchant, media_mode)

I have tried this way but its not working

var media_mode = {
    "featured_media_square" : "square",
    "featured_media_landscape" :"landscape",
    "logo" : "a.png",
    "meta_information.image" : "b.png"  
}

var merchant = {meta_information : {image : ""}}

I want to get result like this

merchant = {
    "featured_media_square" : "square",
     "featured_media_landscape" : "landscape",
     "logo" : "a.png",
     "meta_information" : {"image" : "b.png"}  
}

Answer 1

 var media_mode = { "featured_media_square" : "square", "featured_media_landscape":"landscape", "logo":"a.png", "meta_information.image":"b.png" } var merchant = {meta_information:{image:""}}; for (var key in media_mode) { var kn = key.split("."); for (var key2 in merchant) { if (kn[0] === key2) { var tmp = media_mode[key]; media_mode[kn[0]] = {}; media_mode[kn[0]][kn[1]] = tmp; delete media_mode[key] } } } console.log(media_mode); 

ECMA5 version.

Answer 2

They cant merge, you would have to remap them manually, for instance desctructure media_mode, and pull "image" out of it and then having rest of the object as "...rest", then just put that together in the exact model you asked for

 var media_mode = { featured_media_square: "square", featured_media_landscape: "landscape", logo: "a.png", "meta_information.image": "b.png", }; var { "meta_information.image": image, ...rest } = media_mode; merchant = { ...rest, meta_information: { image }, }; console.log(merchant); 

ES5 as requested

 var media_mode = { featured_media_square: "square", featured_media_landscape: "landscape", logo: "a.png", "meta_information.image": "b.png", }; const image = media_mode["meta_information.image"]; var merchant = Object.assign({}, media_mode, { meta_information: { image: image }, }); console.log(merchant); 

note that in this solution key "meta_information.image" remains in the result, if you would insists on removing it, just run

delete merchant["meta_information.image"]

Answer 3

I tried to merge using this way but it making two different keys of meta_information and meta_information.image

Because they are two different keys.

meta_information and meta_information.image won't merge/override unless the keys match with === .

What you're asking is not available right out of the box in JavaScript.

Answer 4

 var media_mode = { "featured_media_square" : "square", "featured_media_landscape":"landscape", "logo":"a.png", "meta_information.image":"b.png" } var merchant = {meta_information:{image:""}}; var merged = {...media_mode, ...merchant}; console.log(merged); 

works exactly as you expect.

Answer 5

You have Object like this
merchant= {
"featured_media_square" : "square",
"featured_media_landscape":"landscape",
"logo":"a.png",
"meta_information": {"image":"b.png"}
}
You can do something like to merge .
const newObj= {
...merchant,
"meta_information": {"image" : "b.png"}
}

Answer 6

You can't merge meta_information.image with a nested object with the structure meta_information: { image: '' } . JavaScript cannot do that natively - you'd have to do it programmatically. If you want to merge them with using an ES5 method, the easiest method is to use Object.assign like you attempted, then simply delete the key you don't want.

 const media_mode = { featured_media_square: 'square', featured_media_landscape: 'landscape', logo: 'a.png', 'meta_information.image': 'b.png' } const merchant = { meta_information: { image: 'b.png' } } Object.assign(merchant, media_mode); delete merchant['meta_information.image']; console.log(merchant); 

Answer 7

We can use Spread Operator

  var media_mode = { "featured_media_square" : "square", "featured_media_landscape":"landscape", "logo":"a.png", "meta_information.image":"b.png" } var merchant = {meta_information:{image:""}}; var merged = {...media_mode,...merchant}; console.log(merged)