FilmFinder - getMovies() not working

Hello team,
I have finished the FilmFinder Project, except one point which is not working: When I try to append the selected Genre to the getMovies() GET request, it fails saying I dont have a valid API key (which I have ofc).
The getGenres() and getMovieInfo()functions are working, also the getMovies() works when I just send the API key without the " ?with_genres=${selectedGenre} " part.
I really dont know what is wrong :frowning:
Im grateful for any hint where things are off…
Thanks!

Code & Error Msg below:

const getGenres = async () => {
    const genreRequestEndpoint = '/genre/movie/list';
    let requestParams = `?api_key=${tmdbKey}`;             
    let urlToFetch = `${tmdbBaseUrl}${genreRequestEndpoint}${requestParams}`;
    try {
        const response = await fetch(urlToFetch, {method:'GET'});
        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';
    let requestParams = `?api_key=${tmdbKey}?with_genres=${selectedGenre}`;
    let urlToFetch = `${tmdbBaseUrl}${discoverMovieEndpoint}${requestParams}`;
    try {
        const response = await fetch(urlToFetch, {method: 'GET'});
        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;
    const movieEndpoint = `/movie/${movieId}`;
    let requestParams = `?api_key=${tmdbKey}`;
    let urlToFetch = `${tmdbBaseUrl}${movieEndpoint}${requestParams}`;
    try {
        const response = await fetch(urlToFetch, {method: 'GET'});
        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();
    };
    let movies = await getMovies();
    let randomMovie = getRandomMovie(movies);
    let info = await getMovieInfo(randomMovie);
    displayMovie(info);
};

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

Try changing:

// You wrote:
let requestParams = `?api_key=${tmdbKey}?with_genres=${selectedGenre}`;

// Change to:
let requestParams = `?api_key=${tmdbKey}&with_genres=${selectedGenre}`;

I see the second para needs to be chained via & instead of ? …this wasnt obvious to me, thanks a lot @mtrtmk :slight_smile:

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.