Film Finder

I’m working on the Film Finder course for the Full-Stack career path and I cannot get the code to work. I went through the walkthrough and it seems like everything is exactly as it should be but for some reason the “Let’s Play” button doesn’t do anything. I also do not understand the error messages being outputted to the console. Any help would be appreciated.

Here is my code without the key:

const tmdbKey = '';
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}`;
  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;
      console.log(movies);
    }
  }catch (error) {
    console.log(error);
  }
};

const getMovieInfo = async (movie) => {
  const movieId = movie.id;
  const movieEndpoint = `/movie/${movieId}`;
  const requestParams = `?qpi_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;

What error comes up when you look in the console?

Here’s a screenshot of what it says:

I’m getting that TypeError as well. I haven’t figured it out yet. I’ll let you know if I do.

I think the issue is in the try/catch block under the getGenres function. Compare it to the other functions and I think you’ll see what I’m talking about.

Hmm I don’t see a difference between the try/catch block of the getGenres and the other functions. What are you seeing?

I was looking at the indentation. But, I just found out that it doesn’t make a difference, sorry! Apparently indents just make the code more readable. I got mine to work, so let me take another look at your code.

I think I found it. It’s a typo - requestParams variable

Yup that was it! I can’t believe I overlooked that. Thanks so much!

1 Like