バニラJavaScript - Object.keys（オブジェクト）.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

各繰り返しでHTMLコンテンツ全体を置き換えます。私は毎回あなたが追加したいと思う。これを行うには、代わりに.insertAdjacentHTML()を使用してください。

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

    nutritionTable.insertAdjacentHTML(
     "beforeend", 
     `<tr> 
      <td>${[ nutrientsList.label ]}</td> 
      <td>${[ nutrientsList.quantity ]} ${[ nutrientsList.unit ]}</td> 
     </tr>`); 
}); 

これは+=含む.innerHTML割り当てのいずれかの形式は、任意の新しいコンテンツを追加する前に、既存のDOMを破壊するため、既存のHTMLから新しいコンテンツを追加する好ましい方法です。これは望ましくない副作用を引き起こす可能性があります。

---

あなたはECMAScriptの2015個の機能を使用しているので、さておき、あなたはfor-ofループを検討する必要があります。あなたは（あなたが実際にループの各反復でその値をオーバーライドし、最終的な値は、あなたのループの最後の反復の値である）nutritionTableのinnerHTMLの値を変更するすべての反復で

for (const nutrientsList of Object.values(nutrients)) { 
    nutritionTable.insertAdjacentHTML(
     "beforeend", 
     `<tr> 
      <td>${[ nutrientsList.label ]}</td> 
      <td>${[ nutrientsList.quantity ]} ${[ nutrientsList.unit ]}</td> 
     </tr>`); 
} 

Answer 2

。

代わりに - あなたは、その値を追加する+=を使用することができます。

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

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

Answer 3

• x = y：オーバーライドxの値をyで。

• x += y（又はx = x+y）：はxの現在値にy値を付加します。その後

：

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

そしてない

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