Javascript overwrite certain object keys

Question

So, i have an object, for example

let header = { "navbar": { "buttons": { 0: { "content": "home", "color": "blue", "href": "home" }, 1: { "content": "shop", "color": "red", "href": "shop" }, 2: { "content": "contact", "color": "gold", "href": "contact" } } } };

And i have a second object:

let header = { "navbar": { "buttons": { 0: { "content": "work", }, 2: { "color": "blue", "href": "test" } } } };

Now i want to update the first object keys that exist in the second object. So the object looks like this:

let header = { "navbar": { "buttons": { 0: { "content": "work", "color": "blue", "href": "home" }, 1: { "content": "shop", "color": "red", "href": "shop" }, 2: { "content": "contact", "color": "blue", "href": "test" } } } };

What is the easiest way of aproaching this problem? Thanks in advance, Jari

just looping over every key and checks if it exist, but this would need to be modified for every object, so i would need a one-time function... — J.V
– J.V, Commented May 29, 2020 at 12:04

Vaibhav · Accepted Answer · 2020-05-29 12:13:02Z

const header1 = { navbar: { buttons: { 0: { content: "home", color: "blue", href: "home", }, 1: { content: "shop", color: "red", href: "shop", }, 2: { content: "contact", color: "gold", href: "contact", }, }, }, }; const header2 = { navbar: { buttons: { 0: { content: "work", }, 2: { color: "blue", href: "test", }, }, }, }; const header = { navbar: { buttons: {}, }, }; // only given the keys are sequel const header1Keys = Object.keys(header1.navbar.buttons) const header2Keys = Object.keys(header2.navbar.buttons) const keys = header1Keys.length > header2Keys.length ? header1Keys : header2Keys; for (const key of keys) { header.navbar.buttons[key] = {...header1.navbar.buttons[key], ...header2.navbar.buttons[key]} } console.log(header)

@JariVandevoorde This code does not ensure you to keep all the values from header1. For instance, if you have header1: {0, 1, 2, 3}, and header2: {0, 3, 4, 5, 6} (has to be bigger), you will end-up losing 1 and 2 instead of having {0, 1, 2, 3, 4, 6} . This is due to the line : const keys = header1Keys.length > header2Keys.length ? header1Keys : header2Keys;. Unless you want to only preserve keys from the biggest header, this code returns unexpected results.

Adri1 · Accepted Answer · 2020-05-29 14:31:40Z

You can achieve this in different ways, one approach could be to loop for each buttons and merge them with Object.assign().

Here's a rough example, keys from objectA will be preserved and updated (merged) with the values of the corresponding keys from objectB (new key's letter will be added) :

// Initial values. var objectA = { 0: { a: "A0", b: "B0", c: "C0" }, 1: { a: "A1", c: "C1", d: "D1" }, 2: { b: "B2" }, 3: { d: "D3", e: "E3", f: "F3" }, }; // Update values. var objectB = { 1: { a: "A1(updated)", b: "B1(added)", c: "C1(updated)" }, 2: { a: "A2(added)", b: "B2(updated)", c: "C2(added)" }, 3: { a: "A3", c: "C3", d: "D3(updated)" }, 10: { z: "Z10" }, 11: { y: "Y11" }, }; /** * Update one object values with the values of an other object. */ function updateObjectValues(obj1, obj2) { for (var key in obj1) { // Skip key from obj2 that is not in obj1. if (!obj2.hasOwnProperty(key)) continue; // Update (merge) the key object from obj1 with obj2. obj1[key] = Object.assign(obj1[key], obj2[key]); } } updateObjectValues(objectA, objectB); console.info(objectA);

i would need this for a double level object, so an object with keys that have their own keys, like this: codeshare.io/G6kvzk
nevermind, jquery's extend() function works perfectly for this

Collectives™ on Stack Overflow

Javascript overwrite certain object keys

2 Answers 2

1 Comment

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Related