时间戳

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

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

问题描述

我有以下由瑞士政府永久提供的 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>
  );
}

标签： jsonreactjsfetch-apiswr

解决方案

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

推荐阅读