Film Finder - type error undefined reading ‘id’ of movie.id

Hi everyone,

I ran across an unusual error and couldn’t figure it out even when I checked the walkthrough video and some forum samples.

As far as I understand it cannot identify the movie parameter for getMovieInfo() and later at showRandomMovie() where we call for the former function.

I literally have no idea, after hours it seems like it must be working by now.

Please, let me know if you have any ideas. The code is attached :slight_smile:

Screenshot at May 16 21-03-03

const tmdbKey = "2997223a0c999f35593076ba6f5994c0"; const tmdbBaseUrl = "https://api.themoviedb.org/3"; const playBtn = document.getElementById("playBtn"); // Populate a drop-down menu with genres 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); } }; // getGenres(); // Get a random movies list 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; return movies; } } catch (error) { console.log(error); } }; // getMovies(); // Get movie info 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 = await response.json(); return movieInfo; } } catch (error) { console.log(error); } }; // Get a list of movies and ultimately display 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;

In showRandomMovie,

// You wrote:
const movies = await getMovies;

// It should be:
const movies = await getMovies();

Why is it always the easiest thing that I’m just blind to? Geez, thank you so much! I now understand why vscode has highlighted await saying this is redundant. Because it wasn’t a function in my case…