遍历具有属性的对象数组并将它们打印到 DOM答案

【问题标题】：Iterating through an array of objects with properties and printing them to the DOM遍历具有属性的对象数组并将它们打印到 DOM
【发布时间】：2017-05-28 06:48:57
【问题描述】：

我们正在尝试遍历具有属性（键：值）的对象集合并将其写入 dom。

var productContent = {
item1: {
    description: "description 1",
    price: 1,
    URL: "something1.com",
},
item2: {
    description: "description 2",
    price: 2,
    URL: "something2.com",
},

我们尝试了几种不同类型的代码，例如：

var productInfo;
var insertProduct = document.getElementById("productList");

for (var i in productContent) {
    console.log(productContent[i]);
    productInfo += productContent[i];
}

insertProduct.innerHTML = productInfo;

似乎没有任何效果。关于如何解决这个问题的任何想法？我们已经能够获得在控制台中显示的属性，但其他的不多。

【问题讨论】：

为什么要将对象存储在另一个对象中？对于您的用例，数组看起来更简单。
您希望数据以什么格式“写入 dom”？一张桌子？某种清单？你必须构造 HTML 元素来创建你想要的输出；你不能只是“向 DOM 输出一个对象”

标签： javascript loops innerhtml

【解决方案1】：

您的第一个代码块有语法错误。 productContent 对象缺少右花括号：}。
最后一个属性后也有逗号，而不仅仅是属性之间。

您应该使用浏览器开发者工具中的 JS 控制台来调试它。

【讨论】：

当然我们使用了Javascript控制台。然而，它已经到了重点，我什至不确定我们是否在写方向上让这项工作正常。抱歉 - 我的错误，我们没有遗漏花括号，我只是从其他物体上取下来使其更小

【解决方案2】：

您的脚本中有一些错误，您可以开始如下：

var htmlValue = '';

for (var productKey in productContent) {
    var product = productContent[productKey];
    htmlValue += 'description: ' + product.description + '<br>';
    htmlValue += 'price: ' + product.price + '<br>';
    htmlValue += 'url: ' + product.URL + '<br><br>'; 
}

insertProduct.innerHTML = htmlValue;

错误：

for (var i in productContent) {

这只是一个强烈的建议，但您应该将i 更改为对上下文有意义的东西，例如key，因为您正在迭代对象属性。正确命名变量将帮助您发现代码中的错误。

productInfo += productContent[i]

这不是连接对象值的正确方法。第一次迭代，它将是“undefined[object Object]”。

insertProduct.innerHTML = productInfo;

你到底想在这里做什么？你不能只在元素中放入一个对象。您必须按照自己的方式输入代码并格式化。

【讨论】：

永远不要使用innerHTML +=
@Oriol 这是什么原因？
@qxz 因为它将当前内容序列化，连接为字符串，然后重新解析所有内容。它只是一次又一次地重复同样的工作。并且在序列化时，所有内部数据都会丢失。
@Oriol 意思是 DOM 被转换为 HTML 字符串，附加，然后完全重新解析，对吧？说得通;这也会破坏 JS vars 中的 DOM 节点吗？
@qxz 没错，由于 HTML 将被重新解析，对旧 DOM 元素的引用将不再有用，因为它们不再位于文档树中。