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

1

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)

edited May 29, 2020 at 12:13

Vaibhav

1,4981 gold badge12 silver badges16 bronze badges

answered May 29, 2020 at 12:06

Morhaf Shamia

3821 silver badge16 bronze badges

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

1 Comment

Adri1 Over a year ago

@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

0

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

answered May 29, 2020 at 14:31

Adri1

3611 silver badge5 bronze badges

2 Comments

J.V Over a year ago

i would need this for a double level object, so an object with keys that have their own keys, like this: codeshare.io/G6kvzk

J.V Over a year ago

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

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related