0
168
VistasAplicación React: necesita asesoramiento sobre el mapeo de datos json en la tabla
Tengo que obtener datos de una API y asignarlos a la tabla. Este es mi código. ¿Alguien podría aconsejar la función de mapa? Gracias.
import { useEffect, useState } from 'react'; import axios from 'axios'; const MovieList = () => { const [movies, setMovies] = useState([]); useEffect(() => { const fetchItems = async () => { const result = await axios( `api endpoint url` ) setMovies(result.data) } fetchItems() }, []) return ( #omit codes for table heads <tbody> {movies.map(movie => ( <tr> <td>{movie.results.year}</td> <td>{}</td> <td>{}</td> <td>{}</td> <td>{}</td> </tr> ))} </tbody> } export default MovieList; 
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
Actualizar películas como
setMovies(result.data.results)Entonces en lugar de
movies.map()usar
movies[0].films.map(movie => {})
·
Juan Pablo Isaza
Denunciar
0
Parece que tiene una respuesta cuyo result es una serie de películas (otra serie) en cada año. Entonces, la forma fea es iterar cuidadosamente a través de estas matrices, por ejemplo:
{movies.map((movie: any) => { movie.results.map((yearData: any) => ( <tr> <td>{yearData.year}</td> {yearData.films.map((film: any) => ( <Fragment> <td>{film['Detail URL']}</td> <td>{film.Film}</td> <td>{film['Producer(s)']}</td> <td>{...etc}</td> </Fragment> ))} </tr> )); })}Pero si puede mejorar la respuesta en el backend, o realizar algún procesamiento previo del resultado en el frontend, le sugiero que responda las películas agrupadas por año, eso facilitaría todo. Por ejemplo:
[ { year: '2021', films: [{...}] }, { year: '1973', films: [{...}] }, { year: '1927 / 28 [A] (1st)', films: [{...}] }, ... ]
·
Juan Pablo Isaza
Denunciar
Responde la pregunta