0
148
Views¿Cómo obtener datos de un archivo JSON específico?
Tengo un problema con la obtención de datos de un archivo json.
El archivo json tiene algunos subconjuntos y quiero mapearlo. Creé una página de codesandbox y necesito ayuda para mapear los datos relacionados: https://codesandbox.io/s/json-data-fetch-c00rf
Cuando abras el enlace, verás que he usado React obteniendo con useEffect pero no está restringido con eso, eso significa que puedes usar otra cosa.
Los datos json provienen de aquí: https://web-coding-challenge.vercel.joyn.de/api/blocks
Aquí está el código también:
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> ); }2 answers
Answer question0
Puede mapear a través de post.assets y devolver su jsx requerido
Para un ejemplo, aquí estoy enumerando todas las direcciones URL en una lista
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> );0
La respuesta contiene activos como una matriz anidada. Entonces puede usar reducir y obtener todos los elementos en una matriz y luego iterarlo para crear una lista
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> ); } 