Film Finder

Course: https://www.codecademy.com/courses/learn-intermediate-javascript/projects/js-film-finder

I am stuck on #11

The instructions say, “To make sure your code is working, log jsonResponse to the console inside our if statement. You should see a single object with a single key, genres . The value of genres is an array that lists TMDB’s genres. Save the genres property of jsonResponse in a variable called genres . Log this variable to the console to confirm that it contains the correct information.”

I see an array of objects that have 2 keys, id and name in my jsonResponse. After saving the jsonResponse to the variable, genres I get see an error in the console that says, “TypeError: genres is not iterable.” I tried iterating over the array using the .map() method to produce new array that would contain only the list of genres, but that isn’t working for me.

2 Likes

I used .genres for the jsonResponse
(so jsonResponse and genres are not identical).

      let jsonResponse = await response.json();
      //console.log(jsonResponse);
      let genres = jsonResponse.genres;
      //console.log(genres);
      return genres;

I guess I could do
console.log(genres.map(obj => obj.name));
if I wanted to see just the genre (as a string) for each object in that array.

2 Likes

Thank you! I was missing await in front of response.json(). I forgot that .json() is asynchronous and needs the await operator so that the promise can resolve before the rest of the function runs. Regarding saving genres as jsonResponse.genres, we are accessing the genre property of jsonResponse which contains an array of objects. So, why does it only pull the name key of each object and not both name and id?

Hi guys, I am also stuck in #11 I have used await as well but still the console throws below error. I cross checked and the code seems fine but unable to figure out how to resolve this.

Please let me know if you have any inputs.

“SyntaxError: Unexpected end of JSON input” points to a syntax error when you are calling the fetch method.

I cross checked with the original code and I’m not able to find the syntax error. Please let me know if you see any syntax error in my code.

tmbdBaseUrl has a semi-colon at the end, try removing that. I noticed it when I saw it above the SyntaxError message.

Thanks a lot! It is working now. Repetitively I was checking it but was not able to find it. Thanks again.

No problem! Glad to hear it’s working :smiley:

I am also stuck on this exercise. I’ve just gone over the video twice and I can’t see what I’m doing wrong. There’s a failure to fetch error message in the console:

    at fetchObservable.js:23:53
    at instrumentationWrapper (instrumentMethod.js:7:32)
    at r (fs.js:3:18417)
    at t.<computed>.t.<computed> (index.js:85:32)
    at beacon (track.js:58:12)
    at Object.event (track.js:91:5)
    at track (index.ts:31:11)
    at fireTracking (sagas.ts:67:3)
    at fireTracking.next (<anonymous>)
    at next (redux-saga-core.esm.js:1157:29)
helpers.js:5 Uncaught (in promise) TypeError: genres is not iterable
    at populateGenreDropdown (helpers.js:5:25)

and this is my code:

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

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

};

Any help much appreciated!

maybe having
return genres;
in that if-statement block would do something useful.

1 Like

Does anyone have problems with the API request being block by CORS?
I don’t know how to get a way around this, I cannot test my code with all this blocking I just cannot receive any response.

1 Like

You’re exactly right. I feel like that is something I had in there before and tried but I must not have done, or don’t wrong. Anyway, thank you!

Hey, not sure if you have figured out your issue yet, but I was having the same problem and it turned out that when I put in the requestParams, I had put a space in between the api_key and the equals sign. once I fixed that it ran no problem.

Your code should look like this:

const requestParams = ?api_key=${tmdbKey};

what I had that was giving me the CORS error in the console was:

const requestParams = ?api_key = ${tmdbKey};

I spent so long trying to figure it out and then i started trying to manually type out the URL to see if I had done something weird there and yep, I had put spaces where there shouldn’t be!

1 Like

I also worked on this project today and I’m a bit frustrated due to the genres in the dropdown box never appearing. Nothing would load from the API. I have listed my code below, leaving out my API key, in hopes that someone can give me some insight on how to resolve my issue.

Thank you in advance for any help.

script.js
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
, {cache: ‘no-cache’}
);
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_genre=${selectedGenre};
const urlToFetch = ${tmdbBaseUrl}${discoverMovieEndpoint}${requestParams};

try{
const response = await fetch(urlToFetch, {cache: ‘no-cache’});

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, {cache: ‘no-cache’});
if(response.ok) {
const jsonResponse = await response.json();
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 getMoviesInfo(randomMovie);
displayMovie(info);

};

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

There’s a typo here:
it says getMoviesInfo instead of getMovieInfo

1 Like

Thank you for taking the time to reply to my question. I really appreciate it.

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