Hello there!
I’m working on the Film Finder Project and nothing appears to be working. I followed the Unstuck video and searched for tips on the forums and I keep receiving this error " Uncaught (in promise) TypeError: genres is undefined" when I inspect my code.
I attached my code below, I did leave the tmdb and url blank for security measures.
const tmdbKey = '';
const tmdbBaseUrl = '';
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;
return genres;
}
} catch (error) {
console.log(error);
};
};
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 (error) {
console.log(error);
}
}
const getMovieInfo = async (movie) => {
let movieId = movie.id;
let movieEndpoint = "/movie/" + movieId;
let requestParams = "?api_key=" + tmdbKey;
let urlToFetch = tmdbBaseUrl + movieEndpoint + requestParams;
try {
let response = await fetch(urlToFetch);
if (response.ok) {
const movieInfo = await response.json();
return movieInfo;
}
else {
// throw new Error("Request failed!");
console.log("request [for movie] failed!");
}
}
catch (error) {
console.log(error);
}
};
// 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’ve looked over it a few times and can’t find anything. It doesn’t throw an error until I hit let’s play
This is the code I have written if you care to examine some time. I’ve moved on from it for now as it was frustrating. Chalked it up as something on moviedb’s side ha
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
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_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
console.log(movies)
return movies
}
} catch(error) {
console.log(error)
}
};
//getMovies()
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.movieInfo
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 getMovieInfo(randomMovie)
displayMovie(info)
};
getGenres().then(populateGenreDropdown);
playBtn.onclick = showRandomMovie;
That makes it work. Thank you very much!
But I don’t understand why it does? The other methods use the same syntax and work the same
I’m new so genuinely curious where I falter
Mine seems like it’s following the directions to a t and I thought even matched the code in the helper video?
