如何映射使用 JS fetch API 和 SWR 收集的嵌套 JSON 属性

如何解决如何映射使用 JS fetch API 和 SWR 收集的嵌套 JSON 属性

我有以下 JSON API，由瑞士政府永久提供。

https://www.bfs.admin.ch/bfsstatic/dam/assets/14856203/master

我正在尝试列出一些没有出现在第一级的内容——在我的例子中是每次投票 (jaStimmenInProzent) 的一些投票统计数据 (vorlagenId)：

我正在使用 fetch API 和 Vercel SWR。不幸的是，我找不到一个教程/示例，其中映射的内容没有出现在第一级。知道如何继续并列出 vorlagen 数组吗？我尝试了以下但没有成功 (see sandbox)：

import useSWR from "swr";
import "./styles.css";

const fetcher = (...args) => fetch(...args).then((response) => response.json());

export default function App() {
  const { data,error } = useSWR(
    "https://app-prod-static-Voteinfo.s3.eu-central-1.amazonaws.com/v1/ogd/sd-t-17-02-20201129-eidgAbstimmung.json",fetcher
  );

  if (error) return <h1>this is an error: {error}</h1>;

  return (
    <div className="App">
      {data ? (
        data.map((vorlagen) => <h1>{vorlagenId}</h1>)
      ) : (
        <h1>loading...</h1>
      )}
    </div>
  );
}

解决方法

您的数据包含 schweiz 属性，其中 vorlgen 属性是一个数组。您将无法直接在 data 上映射。

您必须映射 data.schweiz.vorlagen，这最终将使您能够访问所需的子属性。

{data ? (
    data.schweiz.volragen.map((vorlagen) => (
      <div>
        <h1>{vorlgen.vorlagenId}</h1>
        <h4>{volragen.resultat.jaStimmenInProzent}</h4>
      </div>
    ))
  ) : (
  <h1>loading...</h1>
)}

,

假设顶部的 JSON 文件是 URL 中的全部内容，那么您只是没有正确访问它，这是一个示例

import useSWR from "swr";
import "./styles.css";

const fetcher = (...args) => fetch(...args).then((response) => response.json());

export default function App() {
  const { data,error } = useSWR(
    "https://app-prod-static-voteinfo.s3.eu-central-1.amazonaws.com/v1/ogd/sd-t-17-02-20201129-eidgAbstimmung.json",fetcher
  );

  if (error) return <h1>this is an error: {error}</h1>;
   

  return (
    <div className="App">
      {data ? (
        data.schwiez.vorlagen.map((value) => <h1>{value.vorlagenId}</h1><p>{value.resultat.jaStimmenInProzent}</p>)
      ) : (
        <h1>loading...</h1>
      )}
    </div>
  );
}

认为您真的只想下载您要访问的数据，因此如果您可以控制从中下载数据的服务器，请考虑添加一个在服务器端和发送之前映射它的功能（仅当您没有当然使用一些数据）。

我不是上帝，但理论上这应该可行（我还没有测试过）

对于值拼写中的任何拼写错误，我们深表歉意