Limit items in a API request

Question

I would like to ask how can I limit my API request for example to a 5 items only because currently when I access an API it returns 20 items. but I want to display only 5. Mostly that I found is just looping all throughout the array of objects and not limiting it to a number of items.

Note: I have no control on the API because I'm just using the moviedb API

Here's my code:

    const main = document.getElementById('main')

getMovies(URL_API)

async function getMovies(url) {
    const res = await fetch(url)
    const data = await res.json()

    showMovies(data.results)
}

function showMovies(movies){
    main.innerHTML = ''

    movies.forEach((movie) => {
        const {title, poster_path, vote_average, overview, vote_count} = movie

        const movieEl = document.createElement('div')
        movieEl.classList.add('movie')

        movieEl.innerHTML = `
            <img src="${IMAGE_URL + poster_path}" alt="${title}">
            <div class="movie-info">
                <h3>${title}</h3>
            </div>
            <div class="movie-rate">
            <img src="imgs/star.svg" width="10" height="10" alt="heart">
            <span class="colorVote">${vote_average}</span>
            <span class="NumberVotes">${vote_count}</span>

            </div>

        `
        main.appendChild(movieEl)
    })
}

Answer 1

You can cut your array into chunks

const main = document.getElementById('main')

getMovies(URL_API)

let chunkIndex = 0; //initialize chunk index

async function getMovies(url) {
    const res = await fetch(url)
    const data = await res.json()

    const chunkSize = 5; //only get 5
    const chunks = []
    for (let i = 0; i < array.length; i += chunkSize) {
       const chunk = data.results.slice(i, i + chunkSize);
       chunks.push(chunk);
    }

    showMovies(chunks[0]); //only use the first chunk for rendering
    

    //TODO: If you have `get more` button
    //You can use chunks[chunkIndex] to get more data
    //showMovies(chunks[chunkIndex]);
    //chunkIndex++; //increase chunk index
}

function showMovies(movies){
    main.innerHTML = ''

    movies.forEach((movie) => {
        const {title, poster_path, vote_average, overview, vote_count} = movie

        const movieEl = document.createElement('div')
        movieEl.classList.add('movie')

        movieEl.innerHTML = `
            <img src="${IMAGE_URL + poster_path}" alt="${title}">
            <div class="movie-info">
                <h3>${title}</h3>
            </div>
            <div class="movie-rate">
            <img src="imgs/star.svg" width="10" height="10" alt="heart">
            <span class="colorVote">${vote_average}</span>
            <span class="NumberVotes">${vote_count}</span>

            </div>

        `
        main.appendChild(movieEl)
    })
}

Answer 2

another way to limit 5, replace

movies.forEach((movie) => {

with

movies.forEach((movie, index) => {
   if(index >= 5) return;

Answer 3

First of all i would check if you can send request to your api to limit te result list. I dont have an account to this api. But i found this request:

https://api.themoviedb.org/5/list/{list_id}?page=1&api_key=<<api_key>>

That must returns 5 items.