How to format JSON in Javascript and HTML?

Question

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?

@AdamJeffers "@type": "PostalAddress" and key "address" and value "streetAddress" — Jay Gray
– Jay Gray, Commented Oct 24, 2015 at 10:20
You are trying to access "address" from "worksFor". You need another loop on "worksfor" since its an array. — WhatisSober
– WhatisSober, Commented Oct 24, 2015 at 10:21

Paul Stanley · Accepted Answer · 2015-10-24 10:40:32Z

2

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>

edited Oct 24, 2015 at 10:40

answered Oct 24, 2015 at 10:25

Paul Stanley

4,0966 gold badges39 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Jay Gray Over a year ago

Does your solution work for you? It's not working on my end.

Paul Stanley Over a year ago

I missed that address is an array, that might work now.

Jay Gray Over a year ago

OK, got it working, but please update your answer as follows. Change postalAddress to streetAddress and modify the append to "+d+"."+e+"</dd>"

Jay Gray Over a year ago

Also, please explain why you changed people to worksFor. Reason is that I have other classes to add at the same level as worksFor in the JSON-LD structure. Examples are alumniOf and sameAs. I used people as the parent for those keys.

Paul Stanley Over a year ago

So I could modify your code easier, if people is the correct name, by all means flip it back.

|

user2575725 · Accepted Answer · 2015-10-24 10:19:05Z

2

This line fails:

people = json["worksFor"]["address"]

And you end up people as undefined, reason being json["worksFor"] gives you array.

answered Oct 24, 2015 at 10:19

user2575725

1 Comment

Jay Gray Over a year ago

Would you show me the proper way to compose this? I'll accept the working answer.

An0nC0d3r · Accepted Answer · 2015-10-24 10:40:12Z

1

This works for me fine...

var json  = {
  "@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" } ]
    } ]
}


json = JSON.parse(json);

json.worksFor[0].address[0]["@type"].PostalAddress.address = 'streetAddress'

edited Oct 24, 2015 at 10:40

answered Oct 24, 2015 at 10:34

An0nC0d3r

1,29316 silver badges35 bronze badges

1 Comment

Jay Gray Over a year ago

Correctomundo. But the issue is that the solution has to work with a Google JSON-LD structure. The JSON-LD is a separate structure that is then formatted by JavaScript processing. To say it another way, your solution is not valid on Google Structured Data Testing Tool.

Collectives™ on Stack Overflow

How to format JSON in Javascript and HTML?

3 Answers 3

6 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related