Film Finder Error Stuck on Step 12

Web Development Full-Stack
,
1 
const tmdbKey = 'xxxxxxxxxxxxxxxxxxxxxx';
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 {
    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;```

Hello. I am trying to see the genres when I click the button or console.log but I have been getting this error on console.log





**customerDataTracker.js:100 Datadog Browser SDK: Customer data exceeds the recommended 3KiB threshold. More details: https://docs.datadoghq.com/real_user_monitoring/browser/troubleshooting/#customer-data-exceeds-the-recommended-threshold-warning**
**i @ customerDataTracker.js:100**
**Show 1 more frame**
**Show lessUnderstand this warning**
**shim.js?id=e1o2KmA24:3 UserLeap - Disabled: sampled**
**ara.paa-reporting-advertising.amazon/aat?pid=67d12128-9fb4-44fb-96d8-bd37e9f3134b&event=PageView&ts=1720180796329:1** 
       **Failed to load resource: the server responded with a status of 403 ()Understand this error**
**2shim.js?id=e1o2KmA24:3 UserLeap - Disabled: sampled**
**www-widgetapi.js:201 Unrecognized feature: 'web-share'.**
**Ob @ www-widgetapi.js:201Understand this warning**
**api.themoviedb.org/3/genre/movie/list?api_key=xxxxxxxxxxxxxxxxxxxxxx:1 **
**       Failed to load resource: the server responded with a status of 401 ()Understand this error**
**helpers.js:5 Uncaught (in promise) TypeError: genres is not iterable**
**    at populateGenreDropdown (helpers.js:5:25)**
2

Considering you are seemingly getting a 401 error, the first obvious question is that:

When running your code are you replacing the x’s with the correct key i.e.

// When running your code, are you replacing:
const tmdbKey = 'xxxxxxxxxxxxxxxxxxxxxx';

// with the correct key:
const tmdbKey = ...correct key...;

You shouldn’t share your tmdbKey publicly, so if you are using x’s just for posting on the forum, that is very good and correct.
But when you actually want to run your code yourself, you will have to use your tmdbKey.

3

Thank you i have figured out the problem now.

1 Like