anarina
September 2, 2022, 3:11pm
#1
Please help. I can’t find how to fix this error as Let’s Play (playBtn) is not working,
error in console
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘length’)
** at getRandomMovie (helpers.js:76:59)**
** at HTMLButtonElement.showRandomMovie (script.js:65:23)**
I haven’t changed anything in helpers.js
I appreciate your help!
```
const tmdbKey = ".....6768 ";
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;
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`;
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) => {
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;
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 = getMovieInfo(randomMovie);
displayMovie(info);
};
getGenres().then(populateGenreDropdown);
playBtn.onclick = showRandomMovie;
```
In the getMovies
function, you should have
const requestParams = `?api_key=${tmdbKey}&with_genres=${selectedGenre}`;
const urlToFetch = `${tmdbBaseUrl}${discoverMovieEndpoint}${requestParams}`;
I think you had requestPArams
instead of requestParams
and you forgot a $
after &with_genres=
.
In the getMovieInfo
function,
on the line
const movieEndpoint = `/movie/{movieId}`;
there should be a $
before {movieId}
And, in the showRandomMovie
function,
there should be an await
in
const info = getMovieInfo(randomMovie);
I used the console in the browser’s “Developer Tools” to try to see where the problems happened.
anarina
September 3, 2022, 9:39pm
#3
Hiya. Thank you for your reply.
I have changed the letter at requestParam as you spotted it was a typo. Thank you for that
I added $ and curly brackets after with_genres key, but
movieEndpoint doesn’t need $ and curly brackets with movieId as I was following video instructions
I tried await
in
const info = getMovieInfo(randomMovie)
but still no success.
So still have no idea what’s wrong with my code ((
I experienced the same error. Awaiting getRandomMovie() in the showRandomMovie function seems to have done the trick (this is not in the guidance). Also, in your code, you need to await getMovieInfo().
Changed:
const randomMovie = getRandomMovie(movies);
To:
const randomMovie = await getRandomMovie(movies);
Hope this helps.
const showRandomMovie = async () => {
const movieInfo = document.getElementById(‘movieInfo’);
if (movieInfo.childNodes.length > 0) {
clearCurrentMovie();
}
const movies = await getMovies();
const randomMovie = await getRandomMovie(movies);
const info = await getMovieInfo(randomMovie);
displayMovie(info);
};