javascript - 在 HTML 中插入对象数据

Question

这个问题已经有答案了:

How to loop through a plain JavaScript object with the objects as members (28 个回答)

已关闭 8 年前。

如何在 HTML 中列出 Javascript 对象的结构化内容？

我的对象看起来像这样:

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

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

示例:

汽车

1. 福特=假
2. 法拉利=假

名称

1. 约翰 = True
2. 哈利=错误

家庭作业

1. 数学=正确
2. 科学=错误
3. 历史=真实
4. 英语=正确

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

Answer 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/