Film Finder project - wrong genres?

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;

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 …

1 Like

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

1 Like