Film Finder project - wrong genres?

Projects Skill Path Projects
1

I just finished the Film Finder JavaScript project and it seems to work, but the suggested movie that pops up is not at all in the genre I selected.

For example, I selected Western, and it listed a movie with aliens… Or I selected Romance and it returned a Dragon Ball movie.

Does anyone else have the same issue? I don’t know if there’s something wrong with my code or if the helper function is not working the way it should.

const tmdbKey = "2f5936eb88d1578d505ecd4735da1c86";
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_genre=${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 = `${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;
2

Hi,
After comparing yours with what I got I believe I found the issue.
In getMovies, when creating requestParams, ‘&with_genre’ should have an s on the end.

Saying that, I still do get some which don’t quite fit. Unless Jurassic World actually is actually a documentary …

2 Likes
3

Thank you, @pluginmaybe! I tried adding an “s” and it seems to be working much better now.

1 Like
4

I have exactly the same issue after completing my Film Finder project.
It doesn’t change editing the

requestParams, ‘&with_genre’

to requestParams, ‘&with_genres’

The randomMovie function doesn’t seem to pick the selected genre.

Anyone that has encountered the same issue or a solution to the problem?
here is my code:


const tmdbKey = 'b3324ae9d06246398f6488b5a5fce60d';
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();
    //console.log(jsonResponse); 
    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 = `${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;
const tmdbKey = 'b3324ae9d06246398f6488b5a5fce60d'; 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(); //console.log(jsonResponse); 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 = `${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;
5

Don’t share your tmdbKey.

In getMovies,

// You wrote:
const requestParams = `?api_key=${tmdbKey}&with_genres${selectedGenre}`;

// Change it to:
const requestParams = `?api_key=${tmdbKey}&with_genres=${selectedGenre}`;
1 Like