在HTML中插入对象数据

Insert Object data in HTML

本文关键字：对象 数据 插入 HTML      更新时间：2023-09-26

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

我的对象看起来像这样：

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

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

示例：

汽车

  1. Ford=错误
  2. Ferrari=错误

名称

  1. John=正确
  2. Harry=错误

作业

  1. 数学=真
  2. 科学=错误
  3. 历史=真
  4. English=True

我知道我可以按名称将对象附加到HTML中，但如果对象是动态的，并且密钥未知，我如何进行循环？

只需要循环，创建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/

相关文章：