在React中阅读schema.org JSON

debugcn 发表于 Dev

杰克·肯波

我有一个带有Axios的React Gatsby应用，可以读取和呈现schema.org JobPosting JSON提要，并在运行时将其显示在页面中。

我可以加载JSON，但无法遍历它（如果这是正确的术语）。

JSON看起来像这样。

[
  {
    "@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"
  }
]

加载后，我将其保存在状态变量中

  state = {
    JobData: [],
  }

在Axios fetch函数中，我更新状态，仅当我使用JSON stringitfy时，它才有效

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

所有JSON数据显示为

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

但我想遍历孩子们并拿出标题等，类似

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

上面的方法不起作用，我收到TypeError：this.state.JobData.map不是函数

ido户

您正在使用JSON.stringify，应该使用JSON.parse（如果响应还不是json。即具有headerapplication/json）

JSON.stringify 接受一个JSON对象并将其转换为字符串。

JSON.parse 接受一个字符串，然后尝试将其转换为JSON对象。

在您的情况下，您有一个JSON字符串，并且您想使用parse方法将其转换为JSON对象。

以下只是您可能不需要或可能不适用于您的情况的常识。

如果您的JSON字符串不是标准JSON（例如，未加引号的键），则可以使用JSON5之类的工具来解析字符串，而不是使用本机JavaScript JSON API。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。