如何用Javascript和HTML格式化JSON？

debugcn 发表于 Dev

杰伊·格雷（Jay Gray）

对于以下GoogleJSON-LD结构...

<script type="application/ld+json" id="datablock-1">
{
  "@context": "http://schema.org/",
  "@type": "Person",
  "honorificPrefix": "Dr",
  "givenName": "Albert",
  "familyName": "Einstein",
  "honorificSuffix": "PhD",
  "jobTitle": "Professor of Physics",
  "worksFor": [ {
      "@type": "EducationalOrganization",
      "department": "School of Science",
      "parentOrganization": "Princeton University",
      "address": [ {
          "@type": "PostalAddress",
          "streetAddress": "One Relativity Way",
          "addressCountry": "USA" } ]
    } ]
}
</script>

这HTML+JavaScript作品：

<body>
    <dl><dt>Big Ideas</dt><dd id="dd-1"></dd></dl>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    var data = $("#datablock-1").html();
    var json = JSON.parse(data);
    var people = json["worksFor"];
    for (i=0; i<=people.length; i++) {
        var a=json["givenName"];
        var b=json["familyName"];
        var c=json["honorificSuffix"];
        var d=json["worksFor"][i]["parentOrganization"];
        $('#dd-1').append("<dd>"+a+" "+b+", "+c+". "+" "+d+"."+" "+"</dd>");
    }
</script>
</body>

现在，我需要在对象中更深入一层，并添加有关的信息"@type": "PostalAddress"。

但这HTML+JavaScript不起作用：

<body>
    <dl><dt>Big Ideas</dt><dd id="dd-1"></dd></dl>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    var data = $("#datablock-1").html();
    var json = JSON.parse(data);
    var people = json["worksFor"]["address"];
    for (i=0; i<=people.length; i++) {
        var a=json["givenName"];
        var b=json["familyName"];
        var c=json["honorificSuffix"];
        var d=json["worksFor"][i]["parentOrganization"];
        var e=json["worksFor"]["address"][i]["streetAddress"];
        $('#dd-1').append("<dd>"+a+" "+b+", "+c+". "+" "+d+"."+" "+e+"</dd>");
    }
</script>
</body>

我究竟做错了什么？如何纠正错误？

保罗·斯坦利

难道您不改变条件就从顶部跳进邮政地址吗？我将您的people变量名更改为，worksFor因为这是您要迭代的内容，因为它看起来好像没有人atm列表。也许我错了？

<body>
    <dl><dt>Big Ideas</dt><dd id="dd-1"></dd></dl>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
    var data = $("#datablock-1").html();
    var json = JSON.parse(data);
    var worksFor= json["worksFor"];
    for (i=0; i<=worksFor.length; i++) {
        var a=json["givenName"];
        var b=json["familyName"];
        var c=json["honorificSuffix"];
        var d=json["worksFor"][i]["parentOrganization"];
        var e=json["worksFor"][i]["address"][0]["streetAddress"];//this line is changed
        $('#dd-1').append("<dd>"+a+" "+b+", "+c+". "+" "+d+"."+e+"</dd>");
    }
</script>
</body>