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

Posted 2023-05-07

【中文标题】遍历具有属性的对象数组并将它们打印到 DOM

【英文标题】：Iterating through an array of objects with properties and printing them to the 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 输出一个对象”

【参考方案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;

错误：

1.

for (var i in productContent) 

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

2.

productInfo += productContent[i]

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

3.

insertProduct.innerHTML = productInfo;

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

【讨论】：

永远不要使用innerHTML +=

@Oriol 这是什么原因？

@qxz 因为它将当前内容序列化，连接为字符串，然后重新解析所有内容。它只是一次又一次地重复同样的工作。并且在序列化时，所有内部数据都会丢失。

@Oriol 意思是 DOM 被转换为 HTML 字符串，附加，然后完全重新解析，对吧？说得通;这也会破坏 JS vars 中的 DOM 节点吗？

@qxz 没错，由于 HTML 将被重新解析，对旧 DOM 元素的引用将不再有用，因为它们不再位于文档树中。