Rendern jedes Objekte in einem Array in HTML aus JavaScript

Question

Ich habe ein JavaScript-Array von Objekten aus einer JSON-Datei. Jedes Objekt im Array repräsentiert ein Produkt. Der folgende Code zeigt das JavaScript. Die console.log zeigt jedes Element in der Konsole an, jedoch gibt innerHTML nur die letzte zurück, da dies der letzte Wert ist, der gerendert werden soll.

/* global $ */ 
var output = document.getElementById('output'); 
var products = []; 

$.getJSON('/products', function(data){ 
    output.innerHTML = data 


    for(var keys in data){ 
     console.log(data[keys]); 
     products.push(data[keys]); 
     output.innerHTML = data[keys].NAME; 
    } 
    // output.innerHTML = products; 
    //console.log(products) 

}); 

Ich möchte, dass jedes Produkt in seiner eigenen Ausgabe div gerendert wird. Wie würde ich jedes Element im HTML statt nur das letzte anzeigen?

Answer 1

einfach das Element zu Ihrer Ausgabe anhängen. Eigentlich hast du es getan.

ändern diese:

output.innerHTML = data[keys].NAME; 

Um dies:

$('#output').append(`<div>${data[keys].NAME}</div>`); 

So:

for(var keys in data){ 
     console.log(data[keys]); 
     products.push(data[keys]); 
     $('#output').append(`<div>${data[keys].NAME}</div>`); 
    } 

Ich würde Ihnen empfehlen, auch die for...in mit einem einfachen forEach zu ändern, so zu ändern die Schleife in diese:

data.forEach((el) => { 
    products.push(el); 
    $('#output').append(`<div>${el.NAME}</div>`); 
}); 

Der Fehler in Ihrem Code war nur, dass Sie den HTML-Inhalt Ihres Elements jedes Mal überschreiben. Wenn Sie ändern:

output.innerHTML = data[keys].NAME; 

dazu:

output.innerHTML += data[keys].NAME; 

Es sollte schon funktionieren

Answer 2

Sie können jQuery "append" verwenden. Sie müssen kein Produktobjekt erstellen.

Versuchen wie folgt aus:

for(var keys in data){ 
    $(".productList").append("<div>"+data[keys].NAME+"</div>"); 
} 

Answer 3

$('#output').append(`<div>${data[keys].NAME}</div>`); 

Answer 4

Grundsätzlich Ihr output Element sollte ein Wrapper andere Elemente enthält für jedes Produkt wiederholt werden. Eine semantische Option besteht darin, eine Liste zu verwenden, beispielsweise ul + li.

Sie sollten Ihre Produkte iterieren und ihren HTML-Code an ein Array anhängen. Wenn Sie mit der Verarbeitung fertig sind, weisen Sie diesen HTML-Teil dem Element output zu.

// Just to keep your code untouched: 
 

 
const $ = { 
 
    getJSON(url, callback) { 
 
    callback([{ 
 
     ID: 1, 
 
     NAME: 'Product 1', 
 
     PRICE: '2.50', 
 
    }, { 
 
     ID: 2, 
 
     NAME: 'Product 2', 
 
     PRICE: '1.25', 
 
    }, { 
 
     ID: 3, 
 
     NAME: 'Product 3', 
 
     PRICE: '10.00', 
 
    }]); 
 
    }, 
 
}; 
 

 
const output = document.getElementById('output'); 
 

 
let productsArray = []; 
 

 
$.getJSON('/products', function(products){ 
 
    productsArray = products; 
 

 
    output.innerHTML = products.map(product => { 
 
    return `<li data-id="${ product.ID }"> 
 
     <span>${ product.NAME }</span> 
 
     <span>${ product.PRICE }</span> 
 
    </li>`; 
 
    }).join(''); 
 
});

<ul id="output"></ul>