Film Finder Problems

I have been reviewing my code for this Film Finder project to figure out why the dropdown list won’t display any info. I checked the other posts but couldn’t find a solution. Has anyone else had this problem and been able to resolve it?

Here is the link https://www.codecademy.com/journeys/front-end-engineer/paths/fecj-22-front-end-development/tracks/fecj-22-async-javascript-and-http-requests/modules/wdcp-22-learn-javascript-syntax-requests-11c9fdeb-dedf-4f69-baca-39576c4a42c3/projects/js-film-finder

and here is my code.

Thanks in advance. Ive been looking at this for hours and havent been able to figure it out.

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;
    }
  } catch(errors) {
    console.log(errors);
  }
};

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;
      return movies;
    }
  } catch(errors) {
    console.log(errors);
  }

};



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

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

You are not returning genres in the getGenres function

2 Likes

so simple! thank you!

1 Like

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