Hi there,
I have trouble understanding where we get the structures of urlToFetch and requestParams from?
For example, in the project Film Finder, we are provided with something like this
const requestParams = ?api_key=${tmdbKey};
const urlToFetch = ${tmdbBaseUrl}${genreRequestEndpoint}${requestParams};
I want to know how do we know their structures to construct these kind of codes. Hope it makes sense.
And also, why some functions in that project have return and some don’t.
const tmdbKey = “#”;
const tmdbBaseUrl = “https://api.themoviedb.org/3”;
const playBtn = document.getElementById(“playBtn”);
const getGenres = async () => {
const genreRequestEndpoint = “/genre/movie/list”;
const requestParams = ?api_key=${tmdbKey};
const urlToFetch = ${tmdbBaseUrl}${genreRequestEndpoint}${requestParams};
try {
const response = await fetch(urlToFetch);
if (response.ok) {
const jsonResponse = await response.json();
const genres = jsonResponse.genres;
return genres;
}
} catch (error) {
console.log(error);
}
};
const getMovies = async() => {
const selectedGenre = getSelectedGenre();
const discoverMovieEndpoint= ‘/discover/movie’;
const requestParams=?api_key=${tmdbKey}&with_genres=${selectedGenre};
const urlToFetch=${tmdbBaseUrl}${discoverMovieEndpoint}${requestParams};
try{
const response= await fetch(urlToFetch);
if(response.ok){
const jsonResponse= await response.json();
const movies= jsonResponse.results;
}
}catch(error){console.log(error)};
};
const getMovieInfo = async(movie) => {
const movieId= movie.id;
const movieEndpoint= movie/${movieId};
const requestParams= ?api_key=${tmdbKey};
const urlToFetch= ${tmdbBaseUrl}${movieEndpoint}${requestParams};
try{
const response= await fetch(urlToFetch);
if(response.ok){
const movieInfo= response.json();
// console.log(movieInfo)
return movieInfo;
}
}catch(error){console.log(error)};
};
// Gets a list of movies and ultimately displays the info of a random movie from the list
const showRandomMovie = async() => {
const movieInfo = document.getElementById(“movieInfo”);
if (movieInfo.childNodes.length > 0) {
clearCurrentMovie();
};
const movies= await getMovies();
const randomMovie= getRandomMovie(movies);
const info= getMovieInfo(randomMovie);
displayMovie(info);
};
getGenres().then(populateGenreDropdown);
playBtn.onclick = showRandomMovie;
Thanks everyone