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"}  
}

@ngfelixl its not working , its not giving the response i mentioned above — Sahil
– Sahil, Commented Jan 23, 2019 at 13:34
You're getting a lot of unhelpful answers. I would recommend first modifying your first object to match the format of the second before performing your nested merge. I.e. transform the dot notation in the keys to proper nested objects. Then you can use existing strategies for a deep merge. — Khauri
– Khauri, Commented Jan 23, 2019 at 13:41
for some reason Iam getting downwoted, yet its the only answer that produces the model you asked for, before it gets lots, you cant merge them, you have to remap the value. "meta_information.image" cant be easily transformed to a object path — Lukáš Gibo Vaic
– Lukáš Gibo Vaic, Commented Jan 23, 2019 at 13:46

Kolzar · Accepted Answer · 2019-01-23 13:53:35Z

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:""}};
  
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.

answered Jan 23, 2019 at 13:53

Kolzar

8811 gold badge13 silver badges25 bronze badges

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

Comments

Lukáš Gibo Vaic · Accepted Answer · 2019-01-23 14:03:15Z

3

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"]

edited Jan 23, 2019 at 14:03

answered Jan 23, 2019 at 13:39

Lukáš Gibo Vaic

4,4401 gold badge20 silver badges30 bronze badges

2 Comments

Sahil Over a year ago

can you tell me how to do it in es5 syntax

Lukáš Gibo Vaic Over a year ago

@YashGandhi there you go ES5, not as elegant but should work

Dinesh Pandiyan · Accepted Answer · 2019-01-23 13:36:58Z

1

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.

answered Jan 23, 2019 at 13:36

Dinesh Pandiyan

6,3193 gold badges36 silver badges50 bronze badges

Comments

MarcoS · Accepted Answer · 2019-01-23 15:59:01Z

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:""}};
 
var merged = {...media_mode, ...merchant};

console.log(merged);

works exactly as you expect.

edited Jan 23, 2019 at 15:59

answered Jan 23, 2019 at 13:39

MarcoS

17.8k27 gold badges101 silver badges189 bronze badges

Comments

Sujil Anto · Accepted Answer · 2019-01-23 13:44:13Z

0

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"}
}

answered Jan 23, 2019 at 13:44

Sujil Anto

11 silver badge2 bronze badges

Comments

Andy · Accepted Answer · 2019-01-23 14:07:43Z

0

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);

edited Jan 23, 2019 at 14:07

answered Jan 23, 2019 at 13:52

Andy

63.6k13 gold badges72 silver badges99 bronze badges

3 Comments

Sahil Over a year ago

where is image value?

Andy Over a year ago

It's there now.

Sahil Over a year ago

you mutated the object pls try it with the object i provided

Prabhakaran · Accepted Answer · 2019-01-23 13:38:03Z

-2

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)

answered Jan 23, 2019 at 13:38

Prabhakaran

1,5442 gold badges13 silver badges21 bronze badges

1 Comment

R M Over a year ago

Spread Operator only does the first level. Anything after that is NOT merged because.... javascript.

Collectives™ on Stack Overflow

How to merge two nested objects in javascript

7 Answers 7

Comments

2 Comments

Comments

Comments

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

2 Comments

Comments

Comments

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related