Film finder not working

Get Help Codecademy
1

Hi! I cant get this project to work, if anyone could help me find a solution that would be great!

These are the errors im getting:

image
image793×343 31.3 KB

thats my code:

const tmdbKey = 'i changed it because you will rob me';
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, {method: 'GET'});
    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, {method: 'GET'});
    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 = fetch(urlToFetch, {method: 'GET'});
    if(response.ok){
      const movieInfo = await response.json();
      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;```
2

In the getMovieInfo function,
you have
const movieId = movie.Id;
but movie.Id should be movie.id

1 Like
3

in the getMovieInfo function,
there should be an await written just before fetch

1 Like
4

Thank you! Spent too much time looking at it, couldnt see it for so long! Its working now :slight_smile: