Hello,
I have been trying to find why the project is working but I haven’t found the problem. I have even looked through some of the forum topics that people posted with the error code that is the same as mine but their solutions are not the problem with my code. Could anyone be able to help me figure out what is causing the error?
Here is my code:
const tmdbKey = "(HAVE THE API KEY JUST REMOVED IT FROM POST)";
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;
//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 reponse = 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) => {
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 movieInfo = await response.json();
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;
Hey Guys, I seem to have the same kinf of problem as colesa09, meaning Uncaught (in promise) TypeError. Only that in mine it couldn’t read properties of undefined (reading poster_path).
The program runs right up to the selection of genres and the button itself is active although that’s about it. I’ve spent several hours debugging it and I seem to be unable to find anything wrong with it.
Any help would be highly appreciated
