Film Finder Project

Web Development
1

Hello guys, can someone help me with FILM FINDER PROJECT? I have genres displayed, but nothing pops up on the screen when I choose a genre.
Here is my code:

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();
  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.movies;
      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

Without proper formatting, it is difficult to identify potential issues.
To preserve code formatting in forum posts, you can use the </> button.
(See [How to] Format code in posts for more details)

Here are a couple of possible issues:

  • In getMovies,
// You wrote:
discoverMovieEndpoint = '/discover/movie';

// It should be:
const discoverMovieEndpoint = '/discover/movie';
  • In getMovies,
// You wrote:
const jsonResponse = await response.json();
const movies = jsonResponse.movies;
return movies;

// It should be:
const jsonResponse = await response.json();
const movies = jsonResponse.results;
return movies;

The TMDB API has response examples for different queries. You can click the “200 - Result” in the Response section to see example responses.

In getMovies, you are using ... /discover/movie ... for your url.
If you look at the example in the Response section of the documentation (Movie), you will see a sample response returns an object with the structure:

{
   "page": ...,
    "results": [ {...}, {...}, ... ],
    "total_pages": ...,
    "total_results": ...
}

therefore

const jsonResponse = await response.json();
const movies = jsonResponse.results;
return movies;

allows you to access the correct property.

1 Like
3

Thank you very much for your help and explanation, it works! :star_struck:

1 Like