Film Finder project API call not working?

Get Help JavaScript
#1

Hey all I am scratching my head here. I am almost 100% certain I have written my code properly, I checked it against the help video and mine is identical. Any insight here would be much appreciated…

Here is my code…

const tmdbKey = '<myApiKeyHere>';
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 = response.json();
      const genres = jsonResponse.genres;
      return genres;
    }
  }
  catch(error) {
    console.log(error);
  }
};

and here is the error I am getting…

Screen Shot 2022-08-05 at 11.00.03 PM
Screen Shot 2022-08-05 at 11.00.03 PM650×588 88.2 KB

#2

I figured it out as soon as I posted this topic… I will post the solution here in case anyone searches it. As per usual it was operator error…

My code above was as follows…

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 = response.json();
      const genres = jsonResponse.genres;
      return genres;
    }
  }
  catch(error) {
    console.log(error);
  }
};

My mistake was here…

const jsonResponse = response.json();

I forgot to use the await keyword here.

As soon as I corrected it like this…

const jsonResponse = await response.json();

The dropdown menu populated as expected…

1 Like