Film finder / getMovieInfo(randomMovie) returns Undefined

Hi everybody!

I am currently working on the Film Finder exersize in the Front End Development Course, and I am having trouble with one of my functions. In my showRandomMovie() function, my getMovieInfo(randomMovie) keeps returnng undefined. I have tried to check all the camelCases, semicolons and brackets, tried to rewrite the function, watched the walkthrough, but I just can’t get it to work.

Here is my code for reference:

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.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.info;

      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);

  let info = await getMovieInfo(randomMovie);

  console.log(info);

  displayMovie(info);

};

getGenres().then(populateGenreDropdown);

playBtn.onclick = showRandomMovie;

Many thanks!

As you already found out, getMovieInfo returns undefined.

Log jsonResponse. Have a look what properties it has. .info is not one of them.

2 Likes

Thank you, I got it now!

1 Like

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.