关于javascript：在HTML中插入对象数据


Insert Object data in HTML

本问题已经有最佳答案，请猛点这里访问。

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

我的对象如下：

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

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

例子：

汽车

  • 福特=假
  • 法拉利=假

    • 姓名

  • 约翰=真
  • 哈里=假

    • 作业

  • 数学=真
  • 科学=谬误
  • 历史=真实
  • 英语=真

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

    相关讨论

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

    1
     

    你的JS

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    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/

    相关讨论