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

Question

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

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

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

我正在使用 fetch API and Vercel SWR. Unfortunately I couldn’t find a tutorial/example where the content that is mapped does not appear on the first level. Any Idea how to proceed and getting the vorlagen array listed? I tried following without success (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>
  );
}

Answer 1

您的数据包含 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>
)}

Answer 2

假设顶部的 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>
  );
}

我想你真的只想下载你要访问的数据，所以如果你可以控制你从中下载它的服务器，考虑添加一个函数来映射它到服务器端并在发送它之前（只有当您当然没有使用某些数据）。

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

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

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

How to map nested JSON properties collected with JS fetch API and SWR

json

reactjs

fetch-api

swr