1

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

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

我试图列出一些没有出现在第一级的内容——在我的例子jaStimmenInProzent中，每张投票的一些投票统计信息（）（vorlagenId）：

截图 API

我正在使用fetch API和Vercel SWR。不幸的是，我找不到映射的内容没有出现在第一级的教程/示例。任何想法如何继续并vorlagen列出阵列？我尝试了以下但没有成功（请参阅沙箱）：

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>
  );
}
4

2 回答 2

2

您的数据包含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>
)}
于 2021-05-17T21:51:27.883 回答
1

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

真的以为您只想下载要访问的数据，因此如果您可以控制从中下载它的服务器，请考虑添加一个在服务器端映射它的函数，然后再发送它（仅当您不使用某些当然是数据）。

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

对值拼写中的任何拼写错误感到抱歉

于 2021-05-17T21:57:50.040 回答