Hi Everyone,
Turns out I forgot to use .results in the line const movies = jsonResponse.results in the getMovies function
I’m hoping someone can help me with my Film Finder project, I’ve been getting this error and cannot seem to find the issue:
Thanks for any help!
exercise is: Film Finder
type error undefined reading ‘id’
const tmdbKey = '***';
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()
const genres = jsonResponse.genres
//console.log(genres)
return jsonResponse.genres
}
} catch (error) {
console.log(error)
}
}
const getMovies = async () => {
const selectedGenre = await getSelectedGenre();
//console.log(selectedGenre)
const discoverMovieEndpoint = 'discover/movie'
const requestParams = '?api_key='+tmdbKey+'&'+'with_genres='+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
//console.log(movies)
return movies
}
} catch (error) {
console.log(error)
}
}
const getMovieInfo = async (movie) => {
const movieId = movie.id
console.log(movie.id + ' ' + movieId)
const movieEndpoint = 'movie/'+movieId
const requestParams = '?api_key='+tmdbKey
const urlToFetch = tmdbBaseUrl+movieEndpoint+requestParams
console.log(urlToFetch)
try {
const response = await fetch(urlToFetch)
if (response.ok) {
const movieInfo = await response.json()
console.log(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()
//console.log(movies)
const randomMovie = await getRandomMovie(movies)
const info = await getMovieInfo(randomMovie)
displayMovie(info)
}
getGenres().then(populateGenreDropdown)
playBtn.onclick = showRandomMovie;