Film Finder Project - *Cannot read properties of undefined (reading 'length') at getRandomMovie*

Language Help JavaScript
1

I’m doing the Film Finder project as part of the Frontend Dev Course

I think I must have made a syntactical error somewhere (though I can’t find where) because when I click the button I receive this error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'length')
    at getRandomMovie (helpers.js:76:59)
    at HTMLButtonElement.showRandomMovie (script.js:65:23)
getRandomMovie @ helpers.js:76
showRandomMovie @ script.js:65

This is my code for the project:

const tmdbKey = //redacted;
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(err){
    console.log(err)
  }
};

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.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)
    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 = await getMovieInfo(randomMovie)
  displayMovie(info)
};

getGenres().then(populateGenreDropdown);
playBtn.onclick = showRandomMovie;

Any help on where I may be going wrong would be greatly appreciated!

2

Try making the following change in getMovies,

// You wrote:
const movies = jsonResponse.movies

// Change to:
const movies = jsonResponse.results