从 JavaScript 渲染 HTML 数组中的每个对象

Question

我有一个从 JSON 文件中获取的对象的 JavaScript 数组。数组中的每个对象代表一个产品。以下代码显示了 JavaScript。 console.log 显示控制台中的每个元素，但是 innerHTML 只呈现最后一个，因为这是要呈现的最后一个值。

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

});

我希望每个产品都在它自己的输出 div 中呈现。我将如何在 HTML 中显示每个元素而不是最后一个？

原文由 Josh Horton 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

只需将元素附加到输出即可。其实你做到了。

改变这个：

 output.innerHTML = data[keys].NAME;

对此：

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

所以：

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

我建议您也用简单的 --- 更改 for...in forEach ，以便将循环更改为：

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

您的代码中的错误只是您每次都覆盖了元素的 HTML 内容。如果你改变：

 output.innerHTML = data[keys].NAME;

对此：

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

它应该已经工作

原文由 quirimmo 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以使用 jQuery“追加”。您不需要制作产品对象。

试试这样：

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

原文由 VK321 发布，翻译遵循 CC BY-SA 3.0 许可协议