Film Finder, button is not working

Please help. I can’t find how to fix this error as Let’s Play (playBtn) is not working,
error in console
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘length’)
** at getRandomMovie (helpers.js:76:59)**
** at HTMLButtonElement.showRandomMovie (script.js:65:23)**

I haven’t changed anything in helpers.js

I appreciate your help!

``` const tmdbKey = ".....6768 "; 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`; 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); } }; 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 jsonResponse = await response.json(); const movieInfo = jsonResponse; 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; ```

In the getMovies function, you should have

  const requestParams = `?api_key=${tmdbKey}&with_genres=${selectedGenre}`;
  const urlToFetch = `${tmdbBaseUrl}${discoverMovieEndpoint}${requestParams}`;

I think you had requestPArams instead of requestParams and you forgot a $ after &with_genres=.

In the getMovieInfo function,
on the line
const movieEndpoint = `/movie/{movieId}`;
there should be a $ before {movieId}

And, in the showRandomMovie function,
there should be an await in
const info = getMovieInfo(randomMovie);

I used the console in the browser’s “Developer Tools” to try to see where the problems happened.

Hiya. Thank you for your reply.
I have changed the letter at requestParam as you spotted it was a typo. Thank you for that :slight_smile:
I added $ and curly brackets after with_genres key, but
movieEndpoint doesn’t need $ and curly brackets with movieId as I was following video instructions
I tried await in
const info = getMovieInfo(randomMovie) but still no success.
So still have no idea what’s wrong with my code ((

I experienced the same error. Awaiting getRandomMovie() in the showRandomMovie function seems to have done the trick (this is not in the guidance). Also, in your code, you need to await getMovieInfo().

Changed:
const randomMovie = getRandomMovie(movies);
To:
const randomMovie = await getRandomMovie(movies);

Hope this helps.

const showRandomMovie = async () => {
const movieInfo = document.getElementById(‘movieInfo’);
if (movieInfo.childNodes.length > 0) {
clearCurrentMovie();
}

const movies = await getMovies();
const randomMovie = await getRandomMovie(movies);
const info = await getMovieInfo(randomMovie);
displayMovie(info);
};