0
159
ViewsReact App: Need advise on mapping json data into table
I have to fetch data from an api and map it to table. This is my code. Would anyone please advise the map function? Thank you.
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 answers
Answer question0
Update movies as
setMovies(result.data.results)
Then instead of
movies.map()
use
movies[0].films.map(movie => {})
·
Juan Pablo Isaza
Report
0
Seems you have a response that is result is an array of films (another array) in each year. So, the ugly way is just iterate carefully through these arrays, e.g:
{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>
));
})}
But if you can make the response better in backend, or perform some pre-processing of the result in the frontend, I suggest you to respond the films grouped by year, that would make everything easier. For example:
[
{
year: '2021',
films: [{...}]
},
{
year: '1973',
films: [{...}]
},
{
year: '1927 / 28 [A] (1st)',
films: [{...}]
},
...
]
·
Juan Pablo Isaza
Report
Answer question