0

so i'm working on a movie app using TheMovieDb API and the problem is that when I request Trending movies the genre of each movie is just an id and to get the genre text I have to make another request to get all genres and then get the name of the genres from the second request,so my question is how to do it because I tried but I'm stuck right now

// I called each request in useEffect separately

`<div className={classes.SliderContainer}>
 <Slider {...settings}> 
   {movies.map((movie) => ( 
     <HomeSlider 
        genre={genres[movie.id]} // here's my lastest try but it didn't work 
        src={ImgUrl(movie.backdrop_path)} 
        title={movie.title}     
        key={movie.id} 
        rating={movie.vote_average} />   
   ))}  
 </Slider> 
</div>`
Ahmed Eid
  • 35
  • 3
  • 1
    Where's the code responsible for making requests? – goto Jul 14 '20 at 12:27
  • Does this answer your question? [Fetch API requesting multiple get requests](https://stackoverflow.com/questions/46241827/fetch-api-requesting-multiple-get-requests) – goto Jul 14 '20 at 12:28
  • If the genre list is the whole list, do it once on startup. Then you just need to find that record for a specific id when you have a movie. – crashmstr Jul 14 '20 at 12:29

1 Answers1

0

Okay...I think I understand you question... :D Approach 1: Write a function which would take in the id of the genre and and return the genre name.

getGenreText = async (genreId) => {
 const genreName = await <..code for the second request>;
 return genreName;
}

and call it inside your map fn.

Approach 2: Since the list of genres is not going to be too large and also not something that would change too often, you could fetch all the genres when your application loads and store it in an array, and finally get the genre name from that array.

Praveen Dass
  • 586
  • 1
  • 3
  • 13
  • Thanks for Reply, i went with the second approach but I got stuck because I don't know what's the right syntax if the genres array looks like this { genres: {id: 123, name:Action}} `{movies.map((movie) => ( ))}` – Ahmed Eid Jul 14 '20 at 12:50
  • Genres should be an array right? can you provide the API to get the genres? let me take a look – Praveen Dass Jul 14 '20 at 12:56
  • Yes it's an array with objects and the API here: https://developers.themoviedb.org/3/genres/get-movie-list – Ahmed Eid Jul 14 '20 at 13:03
  • and also here's a screenshot : https://imgur.com/a/9Q96FKM – Ahmed Eid Jul 14 '20 at 13:06
  • Okay...So your array would look like this: ```genres: [{id: 1, name:Action},{id: 2, name:Romance}...}``` Fire the request to getGenres and use a function like below to get the genre name: ```const getGenreById = (genreId) => { const genre = genres.find(currGenre=> curGenre.id === genreId); return genre.name; }``` – Praveen Dass Jul 14 '20 at 13:29