Undefined error in Film Finder (Javascript) project

Hi all,

Hope someone can help. I’ve just done the Film Finder project on the Intermediate Javascript course, and I keep returning ‘undefined’:
image

I’ve been trying to repair the code for a good hour now, but still can’t figure out where I’ve went wrong. If anyone could point me in the right direction I’d be extremely appreciative! Here’s my code:

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, { cache: "no-cache" }); if (response.ok) { const jsonResponse = await response.json(); console.log(jsonResponse); 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, { cache: "no-cache" }); if (response.ok) { const jsonResponse = await response.json(); //console.log(jsonResponse); const movies = jsonResponse.results; //console.log(movies); return movies; } } 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/*, { cache: "no-cache"}*/); if (response.ok) { const movieInfo = response.json(); 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;

For the avoidance of any doubt, I’ve not changed any of the background files.

Thank you so much in advance. All the best,
Alex :slightly_smiling_face:

In the getMovieInfo function,
I had
const movieInfo = await response.json();

You’re right, I should have awaited that, but I had another error, too - I tried awaiting the getMovieInfo(randomMovie) on line 65, and that, along with your suggestion, has fixed it. Thank you very much for pointing that out to me!

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/*, { cache: "no-cache" }*/); if (response.ok) { const jsonResponse = await response.json(); console.log(jsonResponse); 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/*, { cache: "no-cache" }*/); if (response.ok) { const jsonResponse = await response.json(); //console.log(jsonResponse); const movies = jsonResponse.results; //console.log(movies); return movies; } } 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/*, { cache: "no-cache"}*/); if (response.ok) { const movieInfo = await response.json(); 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 = await getMovieInfo(randomMovie); displayMovie(info); }; getGenres().then(populateGenreDropdown); playBtn.onclick = showRandomMovie;