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