Film Finder not working

Doing Full stack path and completed Film Finder project but it’s not working at all.

I’ve watched the run through and 99% sure I’ve done everything correctly, please can someone put me out of my misery; thank you.

const tmdbKey = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'; //just hiding my API key
const tmdbBaseUrl = 'https://www.themoviedb.org/3';
const playBtn = document.getElementById('playBtn');

const getGenres = async () => {
  const RequestEndpoint = '/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) => {
  const movieId = movie.id;
  const movieEndpoint = `/movie/${movieId}`;
  const requestParams = `?api_key=${tmdbKey}`;
  const urlToFetch = `${tmdbKey}${movieEndpoint}${requestParams}`;
  try{
    const response = await fetch(urlToFetch);
      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;
1 Like

In the getMovies function,
I think
&with_genres${selectedGenre}
should be
&with_genres=${selectedGenre}

1 Like

Thank you; I changed that but still not working. Now get this error on the console:

What is wrong with Js17 that is stopping this from working :frowning:
image

1 Like

and here:
image


I just don’t understand :frowning:

A couple of observations:

On line 6 of your screenshot, you have

const genreRequestEndpoint = '/genre/movie/list';

whereas in the code you copy/pasted in the first post, you have

const RequestEndpoint = '/genre/movie/list';

In getMovieInfo. you have

const urlToFetch = `${tmdbKey}${movieEndpoint}${requestParams}`;

Is that correct? or is it supposed to be

const urlToFetch = `${tmdbBaseUrl}${movieEndpoint}${requestParams}`;

Thanks mtrmtk,

I updated both mistakes in the code but I’m still getting the same type error:

You have
const tmdbBaseUrl = 'https://www.themoviedb.org/3';
but I have
const tmdbBaseUrl = 'https://api.themoviedb.org/3';
in mine.

2 Likes

Thank you janbazant1107978602!!!

:man_facepalming:t3: