themoviedb API return the same set of movies

Question

I just tried the API from themoviedb API and I got some problem.

I tried to fetch some movies data from themoviedb API, but the result is always the same and never changed, I know that themoviedb API is just return 20 data of movies, but the problem is, it always return the same movie, with same title of course:

Here is my url : https://api.themoviedb.org/3/discover/movie?with_genres=18&api_key=<my_api_key>

What I want to know is how to get 20 data of movie and it's always return random movies when I render the web site.

Maybe you can help me out of this problem, and I hope you explain with some example especially in the URL writing.

Answer 1

if you want to see all 20 movies, you will need a forEach to show all 20 movies, otherwise you will only see one.

you can make a request with the fetch method and in another method you can display the all movies using forEach.

async function getInfo(){

       
 var API_KEY='apiKey';
 const res='https://api.themoviedb.org/3/discover/movie?with_genres=18&api_key='+API_KEY;
    
        return await fetch(res)
            .then( (response) => { return response.json(); })
            .catch( (response) => { console.log(response); })
     
}


 async function showInfo(){
 
    const { results } = await getInfo();//get the object, which is returned by the getInfo function
    const movies = Array.from(results);

    //template
    let template = document.getElementById('template-movies').content;
    let fragment = document.createDocumentFragment();
    //read movies
    movies.forEach( movie=> {
        console.log(movie);
        template.querySelector('#image').src ='https://image.tmdb.org/t/p/w300'+movie.poster_path; //image
        template.querySelector("#title").textContent = movie.title; //movie title
        let clone = document.importNode(template, true); //clone fragment
        fragment.appendChild(clone); //add clone to fragment
    });
    //add fragment to parent
    document.getElementById('content').appendChild(fragment);
}