Help with Film Finder in Intermediate JS

Get Help JavaScript
#1

Hi there, I can’t figure out what is wrong with my code. The button “Let’s Play” doesn’t activate anything. I’ve even used code from other sources that I believe to be correct and working and it still is not working.

Here is my code:

const tmdbKey = '<personal API';
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;
    console.log(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();
      //console.log(jsonResponse);
      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

In the getMovieInfo function,
movie.Id
should be
movie.id

Also, remember to use the browser’s console (often in the developer tools menu) to check for errors.

2 Likes
#3

Thank you, that fixed it.

#4

hi
Reached step 27 in Film Finder, but not getting desired output. If someone could please help?
Below is my code

const tmdbKey = ‘my 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;

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

const movies = jsonResponse.results;

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

};

};

getGenres().then(populateGenreDropdown);

playBtn.onclick = showRandomMovie;

const movies = await getMovies();

const randomMovie = getRandomMovie(movies);

const info = await getMovieInfo(randomMovie);

displayMovie(info);

#5

I think the const movies up to displayMovie(info); should be inside the showRandomMovie function.

#6

Thank You.
It’s working.