Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

155
Vistas
Limit items in a API request

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)
    })
}
about 4 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

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.

about 4 years ago · Juan Pablo Isaza Denunciar

0

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)
    })
}
about 4 years ago · Juan Pablo Isaza Denunciar

0

another way to limit 5, replace

movies.forEach((movie) => {

with

movies.forEach((movie, index) => {
   if(index >= 5) return;
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda