javascript - Vanilla JavaScript - Object.keys(object).forEach 仅显示最后一项

Question

我有一个迭代对象的函数。

在 HTML 上，它应该在其自己的表行中显示对象中的每个键和值。

Object.keys(nutrients).forEach(function(key) {
    const nutrientsList = nutrients[key];

    nutritionTable.innerHTML = `<tr>
                                    <td>${[ nutrientsList.label ]}</td>
                                    <td>${[ nutrientsList.quantity ]} ${[ nutrientsList.unit ]}</td>
                                </tr>`
});

当 console.log 时，它按预期显示，但在 HTML 上覆盖所有先前元素的权限，并仅显示最后一个元素。

DEMO

如何改进代码并获得正确的结果？

Answer 1

• x = y:用y覆盖x的值。

• x += y(或 x = x+y):追加 y 值为 x 的当前值。

然后:

 nutritionTable.innerHTML += `<tr>....` // append 👍🏻

不是

 nutritionTable.innerHTML = `<tr>....` // override 👎🏻