Film Finder generates a film of undefined

Hi everybody! I just finished coding this exercise. The Dropdown worked but the code didn’t manage to generate movie info by clicking the button. Here is my code.

onst tmdbKey = "<api_key>";
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();
      console.log(jsonResponse);
      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 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 = getMovieInfo(randomMovie);
  displayMovie(info);
};

getGenres().then(populateGenreDropdown);
playBtn.onclick = showRandomMovie;

Here is the error on the console.

3 Likes

It could be an error in your request.
Add a debug console.log immediately after your declaration:

const urlToFetch = `${tmdbBaseUrl}${movieEndpoint}${requestParams}`;
console.log(urlToFetch)

Open a browser and paste the console log into the address bar. If you’re still getting a 404 error, then you’ll need to look at your request/API key etc. (feel free to paste the URL with your API key redacted here).

In getMovieInfo,

// You wrote:
const movieEndpoint = "/movie/{movieId}";

// It should be:
const movieEndpoint = `/movie/${movieId}`;
1 Like

Hey! I was going round in circles and I found in the end I’d also missed the ‘await’ on

const info = getMovieInfo(randomMovie);

When I re-read everything super close, I then saw it was written as:

Await its return and save it to a variable called info .

I hope you got there in the end as well! :sweat_smile:

3 Likes

Thank you, it works now. :laughing:

1 Like

Made this same mistake as well – but this thread was very helpful and now everything is working :sunglasses:

Thank you very much. It works ! :pray: