Film Finder Project: genre is undefined

Web Development
1

Hi! I for some reason I’m stuck on getting step 11 to work and cannot get the genres array to log to the console, here’s my code.

const tmdbKey = 'xxxxxxxxxxxxxxxxxxxxxx';
const tmdbBaseUrl = 'https://api.themoviedb.org/3';
const playBtn = document.getElementById('playBtn');

const getGenres = async () => {
  const genreRequestEndpoint = "/genre/movies/list";
  const requestParams = `?api_key=${tmdbKey}`;
  const urlToFetch = `${tmdbBaseUrl}${genreRequestEndpoint}${requestParams}`;

  try {
    let response = await fetch(urlToFetch, { method: "GET"});
    if (response.ok) {
      const jsonResponse = await response.json();
      console.log(jsonResponse);
      let genres = jsonResponse.genres;
      return genres;
    }
  } catch (err) {
    console.log(err);
  }
};

const getMovies = () => {
  const selectedGenre = getSelectedGenre();

};

const getMovieInfo = () => {

};

// Gets a list of movies and ultimately displays the info of a random movie from the list
const showRandomMovie = () => {
  const movieInfo = document.getElementById('movieInfo');
  if (movieInfo.childNodes.length > 0) {
    clearCurrentMovie();
  };

};

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

Here’s the error:

Uncaught (in promise) TypeError: genres is undefined
2 
// You wrote:
const genreRequestEndpoint = "/genre/movies/list";

// It should be:
const genreRequestEndpoint = "/genre/movie/list";
3

Ahh you’re right, thank you!

1 Like
4

hi!
I am stuck in the step no. 11 of the ‘Film Finder Project’. If you can please help.
const tmdbKey = ‘XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX’;
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);
}
}
catch(error){
console.log(error);
}
};

5

step 11 would be

const genres = jsonResponse.genres;
console.log(genres);

step 12 would be

return genres;
2 Likes
6

Thank You. It’s working.

7

Hi guys ,
I’m having this exact issue with some strange errors when I try to log ‘jsonResponse’

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

};

const getMovies = () => {
  const selectedGenre = getSelectedGenre();

};

const getMovieInfo = () => {

};

// Gets a list of movies and ultimately displays the info of a random movie from the list
const showRandomMovie = () => {
  const movieInfo = document.getElementById('movieInfo');
  if (movieInfo.childNodes.length > 0) {
    clearCurrentMovie();
  };

};

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

I can’t figure what is wrong with my codes, but I keep getting this particular Errors Messages

  script.js:11 
        
        
       GET https://api.themoviedb.org/3/genre/movie/list?api_key%20=******* 401 (Unauthorized)
getGenres @ script.js:11
(anonymous) @ script.js:40
helpers.js:5 Uncaught (in promise) TypeError: genres is not iterable
    at populateGenreDropdown (helpers.js:5:25)

I have followed what was done in the solution video, but my code isn’t showing any array still, instead I keep getting this errors repeatedly.
Not sure where I could have done any wrong

8

Try changing

// You wrote:
const requestParams = `?api_key = ${tmdbKey}`;

// Change to:
const requestParams = `?api_key=${tmdbKey}`;
1 Like
9

Wow !!! :hushed: :open_mouth: :hushed:
It worked, but I’m a little confused, I thought whitespaces don’t matter, or what exactly is different in the two codes ?
Thank you so much!!!

10

http - Spaces in URLs? - Stack Overflow