Search code examples
javascriptjsonjson-ld

How to format JSON in Javascript and HTML?

For the following Google JSON-LD structure ...

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

this HTML + JavaScript works:

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

Now I need to reach one level deeper in the object and add information about "@type": "PostalAddress".

But this HTML + JavaScript does not work:

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

What am I doing wrong? How to correct the error?

Solution

  • Wouldn't you just hop into postal address from the top, without changing the condition? I've changed your people variable name to worksFor since that is what you are iterating through, since it doesn't look like you have a list of people atm. Maybe I'm wrong?

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