Javascript перезаписывать определенные ключи объекта

Question

Итак, у меня есть объект, например

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

И у меня есть второй объект:

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

Теперь я хочу обновить ключи первого объекта, которые существуют в второй объект. Итак, объект выглядит так:

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

Какой самый простой способ решить эту проблему? Заранее спасибо, Яри

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

Answer 2

Вы можете добиться этого по-разному. Один подход может заключаться в l oop для каждой кнопки и объединении их с Object.assign().

Вот примерный пример, ключи из объекта A будут сохранены и обновлены (объединены) со значениями соответствующих ключей из объекта B (будет добавлена ​​новая буква ключа):

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