How to connect two APIs requests?

Question

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>`

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

Praveen Dass · Accepted Answer · 2020-07-14T12:47:27.060

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.

edited Jul 14 '20 at 12:47

answered Jul 14 '20 at 12:39

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

How to connect two APIs requests?

1 Answers1