Vanilla JavaScript - Object.keys (Objekt) .forEach zeige nur das letzte Element an

Question

Ich habe eine Funktion, die durch ein Objekt iteriert.

Auf dem HTML sollte es jeden Schlüssel und Wert aus dem Objekt innerhalb seiner eigenen Tabellenzeile anzeigen.

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

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

Wenn console.log es wie erwartet zeigt aber auf der HTML über Rechte, die alle bisherigen Elemente und zeigt nur das letzte.

DEMO

Wie kann ich den Code verbessern und das richtige Ergebnis bekommen?

Answer 1

Sie ersetzen den gesamten HTML-Inhalt bei jeder Iteration. Ich nehme an, Sie möchten jedes Mal anhängen. Verwenden Sie stattdessen .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>`); 
}); 

Dies ist die bevorzugte Art und Weise neue Inhalte von Anhängen aus bestehenden HTML, da jede Form von .innerHTML Zuordnung, einschließlich +=, wird die bestehende DOM zerstören, bevor sie eine neue Inhalte hinzufügen. Dies kann unerwünschte Nebenwirkungen hervorrufen.

---

Als beiseite, da Sie ECMAScript 2015 Funktionen verwenden, können Sie eine for-of Schleife zu betrachten.

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

Answer 2

In jeder Iteration Sie den Wert der innerHTML des nutritionTable ändern (so überschreiben Sie tatsächlich diesen Wert in jeder Iteration in der Schleife, und der Endwert ist der Wert der letzten Iteration in der Schleife).

Statt - können Sie += verwenden diesen Wert anzufügen:

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: Überschreibungen der Wert x von y.

• x += y (oder x = x+y): anhängty Wert auf den aktuellen Wert von x.

Dann:

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

Und nicht

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