ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

如何在Javascript和HTML中格式化JSON?

2019-08-29 17:36:31  阅读:202  来源: 互联网

标签:json-ld javascript json


对于以下Google JSON-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>

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

解决方法:

难道你不是只是从顶部跳到邮政地址,而不改变条件?我已经将你的人员变量名称改为works,因为这是你正在迭代的内容,因为它看起来不像你有一个人的列表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>

标签:json-ld,javascript,json
来源: https://codeday.me/bug/20190829/1762489.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有