在 HTML 中插入对象数据 [重复]

Posted 2023-02-22

【中文标题】在 HTML 中插入对象数据 [重复]

【英文标题】：Insert Object data in HTML [duplicate]

【发布时间】：2014-12-27 20:37:51

【问题描述】：

如何在 html 中列出 javascript 对象的结构化内容？

我的对象如下所示：

var lists = 
"Cars":"Ford":false,"Ferarri":false,
"Names":"John":true,"Harry":false,
"Homework":"Maths":true,"Science":false,"History":true,"English":true

将键打印为标题，将属性 + 值打印为下面的有序列表，循环会是什么样子？

例子：

汽车

福特 = 假 法拉利 = 假

名字

约翰 = 真 哈利 = 假

家庭作业

数学 = 真 科学 = 错误 历史 = 真 英语 = 真

我知道我可以按名称将对象附加到 HTML，但如果对象是动态的，并且密钥未知，我该如何创建循环来执行此操作？

【问题讨论】：

@Quentin：这个问题不仅是关于循环遍历一个对象，也是关于将元素附加到 HTML

@Cerbrus — 问题的最后一段说附加到 HTML 部分已经排序。如果这不是 OP 想要说的，那么问题就太宽泛了。

@Quentin：哦，你说得对。没关系我说什么:-)

@tymeJV：不要因为你想回答问题就滥用你的 JS 金徽章-.-

@Cerbrus -- 好吧，我确实根据您最初的评论重新打开它，假设我应该阅读更多内容：\

【参考方案1】：

只需循环，创建 HTML 字符串，然后追加！假设你有一个容器：

<div id="container"></div>

还有你的 JS

var htmlString = "";
for (var key in lists) 
    htmlString += "<span>" + key + "</span>";
    htmlString += "<ul>";
    for (var item in lists[key]) 
        htmlString += "<li>" + item + " = " + lists[key][item] + "</li>";
    
    htmlString += "</ul>";


document.getElementById("container").innerHTML = htmlString;

工作演示：http://jsfiddle.net/owqt5obp/

【讨论】：

它适用于示例，因此 +1，为了安全起见，该值应该被转义。

@MauricePerry -- 你是什么意思？

感谢@tymeJV 没有考虑循环内的循环！

@tymeJV：字符串可能包含特殊字符，例如

@tymeJV 在这种情况下可以使用“.append”吗？