如何从特定的 JSON 文件中获取数据？

Question

我在从 json 文件中获取数据时遇到一个问题。

json 文件有一些子数组，我想映射它。我创建了一个 codesandbox 页面，需要帮助映射相关数据：https://codesandbox.io/s/json-data-fetch-c00rf

当你打开link你会看到我使用了React fetching with useEffect 但它不受限制，这意味着你可以使用其他东西。

json 数据来自这里：https://web-coding-challenge.vercel.joyn.de/api/blocks

这里还有代码：

import "./styles.css";
import React, { useState, useEffect } from "react";

export default function App() {
  const [todos, setTodos] = React.useState<any[]>([]);

  React.useEffect(() => {
    fetch(`https://web-coding-challenge.vercel.joyn.de/api/blocks`)
      .then((results) => results.json())
      .then((data) => {
        setTodos(data);
      });
  }, []);

  return (
    <div className="App">
      {todos.map((post: any) => (
        <div>
          <h1>{post.id}</h1>
          <h2>{post.assets.primaryImage.url}</h2>
        </div>
      ))}
    </div>
  );
}

Answer 1

您可以通过 post.assets 和 return 映射您需要的 jsx

举个例子，我列出了列表中的所有网址

    return (
    <div className="App">
      {todos.length && todos.map((post: any) => (
        <div>
          <h2>{post.id}</h2>
          <ul>
          {post.assets.map((asset: any, index: number)=>{
            return (
              <li key={index}>{asset.primaryImage.url}</li>
            )
          })}
          </ul>
        </div>
      ))}
    </div>
  );

sandbox

Answer 2

响应包含作为嵌套数组的资产。因此，您可以使用 reduce 并获取一个数组中的所有元素，然后对其进行迭代以创建 list

import "./styles.css";
import React, { useState, useEffect } from "react";

export default function App() {
  const [todos, setTodos] = React.useState<any[]>([]);

  React.useEffect(() => {
    fetch(`https://web-coding-challenge.vercel.joyn.de/api/blocks`)
      .then((results) => results.json())
      .then((data) => {
        const responseData = data.reduce((acc:any,curr:any)=>{
          const assets = curr.assets;
             acc.push(...assets)
          return acc ;
          },[])
        setTodos(responseData);
      });
  }, []);

  return (
    <div className="App">
      {todos.map((post: any) => (
        <div>
          <h1>{post.id}</h1>
          <h2>{post.primaryImage.url}</h2>
        </div>
      ))}
    </div>
  );
}

如何从特定的 JSON 文件中获取数据？

How to fetch data from a specific JSON file?

javascript

json

fetch

typescript

reactjs