Film finder project not displaying anything

Web Development
1

I am currently at the Film finder project but I can’t populate any of the images that the teacher can at the end of the tutorial

This is my code:

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);
        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_genre=${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) => {
    const movieId = movie.id;
    const movieEndpoint = `/movie/${movieId}`;
    const requestParams = `?api_key=${tmdbKey}`;
    const urlToFetch = `${tmdbBaseUrl}${movieEndpoint}${requestParams}`;

    try {
        const response = 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 = await getMovieInfo(randomMovie);
    displayMovie(info);
};

getGenres().then(populateGenreDropdown);
playBtn.onclick = showRandomMovie;

And the error code I am getting in the console is:

helpers.js:89 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'poster_path')
    at displayMovie (helpers.js:89:53)
    at HTMLButtonElement.showRandomMovie (script.js:68:5)

Please help me, I am so close.

2

Try the following couple of changes:

  • In getMovies,
// You wrote:
const requestParams = `?api_key=${tmdbKey}&with_genre=${selectedGenre}`;

// Change to:
const requestParams = `?api_key=${tmdbKey}&with_genres=${selectedGenre}`;
  • In getMovieInfo,
// You wrote:
const response = fetch(urlToFetch);

// Change to:
const response = await fetch(urlToFetch);
3

My dude, you are the real deal, thank you!

1 Like