Help! TypeError on Film Finder Project

Hello there!
I’m working on the Film Finder Project and nothing appears to be working. I followed the Unstuck video and searched for tips on the forums and I keep receiving this error " Uncaught (in promise) TypeError: genres is undefined" when I inspect my code.
I attached my code below, I did leave the tmdb and url blank for security measures.

const tmdbKey = ''; const tmdbBaseUrl = ''; 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; return movies } } catch (error) { console.log(error); } } const getMovieInfo = async (movie) => { let movieId = movie.id; let movieEndpoint = "/movie/" + movieId; let requestParams = "?api_key=" + tmdbKey; let urlToFetch = tmdbBaseUrl + movieEndpoint + requestParams; try { let response = await fetch(urlToFetch); if (response.ok) { const movieInfo = await response.json(); return movieInfo; } else { // throw new Error("Request failed!"); console.log("request [for movie] failed!"); } } catch (error) { console.log(error); } }; // Gets a list of movies and ultimately displays the info of a random movie from the list const showRandomMovie = () => { const movieInfo = document.getElementById('movieInfo'); if (movieInfo.childNodes.length > 0) { clearCurrentMovie(); }; }; getGenres().then(populateGenreDropdown); playBtn.onclick = showRandomMovie;

You are missing an = in the requestParams string in the getMovies function.

There,
?api_key${tmdbKey}
should be
?api_key=${tmdbKey}

1 Like

thank you! i missed that error

i forgot to mention but my drop down isnt working too

Your showRandomMovie function seems to be missing some stuff
and I think it should be an async function.

Here’s mine:

const showRandomMovie = async () => {
  const movieInfo = document.getElementById('movieInfo');
  if (movieInfo.childNodes.length > 0) {
    clearCurrentMovie();
  };
  let movies = await getMovies();
  let randomMovie = getRandomMovie(movies);
  let info = await getMovieInfo(randomMovie);
  displayMovie(info);
};

Have y’all experienced this error yet? Says it’s coming from helpers.js. Not sure if there’s something in my code causing this

image

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)
};