Read Schema.org JSON In React

I have a React Gatsby app with Axios to read and render schema.org JobPosting JSON feed and display it in a page at runtime.

I'm able to load the JSON but I'm having trouble traversing it (if that's the right term).

The JSON looks like this..

[
  {
    "@context": "http://schema.org",
    "@type": "JobPosting",
    "datePosted": "2019-10-24T08:56:35+00:00",
    "description": "description here",
    "hiringOrganization": {
      "@type": "Organization",
      "name": "Evooq",
      "department": { "@type": "Organization", "name": "Technology" },
      "logo": "https://hire.withgoogle.com/public_frame/jobs/evooqch/logo/P_AAAAABlAAAVKRjuodf8v8_.png"
    },
    "identifier": {
      "@type": "PropertyValue",
      "name": "Evooq",
      "value": "P_AAAAABlAAAVA0RlA-fYhv0"
    },
    "jobLocation": {
      "@type": "Place",
      "address": {
        "@type": "PostalAddress",
        "addressLocality": "Lausanne",
        "addressRegion": "VD",
        "addressCountry": "CH"
      }
    },
    "title": "Front-End Software Engineer",
    "url": "https://hire.withgoogle.com/public/jobs/evooqch/view/P_AAAAABlAAAVA0RlA-fYhv0",
    "employmentType": "Full time"
  },
  {
    "@context": "http://schema.org",
    "@type": "JobPosting",
    "datePosted": "2019-10-24T08:56:35+00:00",
    "description": "description here",
    "hiringOrganization": {
      "@type": "Organization",
      "name": "Evooq",
      "department": { "@type": "Organization", "name": "Technology" },
      "logo": "https://hire.withgoogle.com/public_frame/jobs/evooqch/logo/P_AAAAABlAAAVKRjuodf8v8_.png"
    },
    "identifier": {
      "@type": "PropertyValue",
      "name": "Evooq",
      "value": "P_AAAAABlAAAVA0RlA-fYhv0"
    },
    "jobLocation": {
      "@type": "Place",
      "address": {
        "@type": "PostalAddress",
        "addressLocality": "Lausanne",
        "addressRegion": "VD",
        "addressCountry": "CH"
      }
    },
    "title": "Front-End Software Engineer",
    "url": "https://hire.withgoogle.com/public/jobs/evooqch/view/P_AAAAABlAAAVA0RlA-fYhv0",
    "employmentType": "Full time"
  }
]

After loading it, I save it in a state variable

  state = {
    JobData: [],
  }

In the Axios fetch function I update the state, it only works if I JSON stringitfy

this.setState({ JobData: JSON.stringify(res.data) })

All the JSON data displays with

<p> {this.state.JobData} </p>

but I want to loop through the children and pull out the titles etc, something like

            <ul>
              {this.state.JobData.map(node => (
                <li key={node.datePosted}>
                  <a href={node.url} target="_blank">
                    {node.title}
                  </a>
                </li>
              ))}
            </ul>

The above doesn't work, I get TypeError: this.state.JobData.map is not a function

You're using JSON.stringify you should use JSON.parse (if the response isn't a json already. i.e. has header application/json)

JSON.stringify takes a JSON object and converts it to a string.

JSON.parse takes a string, and tries to convert it into a JSON object.

In your case you have a JSON string, and you want to convert it into a JSON object, using the parse method.

Below is just general knowledge that you might not need or might not be applicable in your case.

If your JSON string isn't standard JSON (unquoted keys for example), you could use a tool like JSON5 to parse your string instead of the native JavaScript JSON API.