Film finder-undefined?

Language Help JavaScript
,
1

I have just finished the film finder project.
https://www.codecademy.com/courses/learn-intermediate-javascript/projects/js-film-finder
I get the result ‘undefined’ everytime. Can someone look at my code and offer any suggestions?

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};
console.log(urlToFetch);
try {
const response = await fetch(urlToFetch);
if (response.ok) {
const jsonResponse = await response.json();
//console.log(jsonResponse);
const genres = jsonResponse.genres;
//console.log(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;
//console.log(movies);
return movies;
}
} catch(error) {
console.log(error);
}
};

//getMovies();
const getMovieInfo = async (movie) => {
const movieId = movie.id;
const movieEndpoint = /movie/${movie_id};
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;

Thanks.

2

In the getMovieInfo function, you have movieId on one line, but you have movie_id on the next line.

3

nice catch. I changed movie_id to movie.id but it didn’t work. Was that the change you were suggesting?

4

You could put await for more of the stuff in the showRandomMovie function.

  const info = await getMovieInfo(randomMovie);

Also, you may want to remove your api key from your previous post. (You probably don’t want others to use your key.)

5

Thanks for the suggestion. Still no joy. Now it won’t even bring up undefined. I took at look at the console and I am getting an awful lot of errors. Specically:

Failed to load resource: the server responded with a status of 503 ()

Is this what is causing the problem?

6

probably.
It worked when I tried your code.

your code

Your code, except for the first few lines, with some extra console.log stuff.

const getGenres = async () => {
  const genreRequestEndpoint = '/genre/movie/list';
  const requestParams = `?api_key=${tmdbKey}`;
  const urlToFetch = `${tmdbBaseUrl}${genreRequestEndpoint}${requestParams}`;
  console.log(urlToFetch);
  try {
    const response = await fetch(urlToFetch);
    if (response.ok) {
      const jsonResponse = await response.json();
      //console.log(jsonResponse);
      const genres = jsonResponse.genres;
      //console.log(genres);
      return genres;
    }
    else {
      console.log("failed to fetch 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;
      //console.log(movies);
      return movies;
    }
    else {
      console.log("failed to fetch movies using genre " + selectedGenre);
    }
  } catch(error) {
    console.log(error);
  }
};

//getMovies();
const getMovieInfo = async (movie) => {
  const movieId = movie.id;
  const movieEndpoint = `/movie/${movieId}`; // movie.id instead of movieId also works
  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;
    }
    else {
      console.log("failed to fetch movie info")
    }
  } 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;
7

Yay! I got it working. Will post my code here so it might help others. Big thanks to @janbazant1107978602 for all your help.

const getGenres = async () => {
const genreRequestEndpoint = ‘/genre/movie/list’;
const requestParams = ?api_key=${tmdbKey};
const urlToFetch = ${tmdbBaseUrl}${genreRequestEndpoint}${requestParams};
console.log(urlToFetch);
try {
const response = await fetch(urlToFetch);
if (response.ok) {
const jsonResponse = await response.json();
//console.log(jsonResponse);
const genres = jsonResponse.genres;
//console.log(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;
//console.log(movies);
return movies;
}
} catch(error) {
console.log(error);
}
};

//getMovies();
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 = await getMovieInfo(randomMovie);
displayMovie(info);
};

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

8

This is what fixed it for me! I’d glossed over that instruction and treated it like the previous one :sweat_smile: