Me gustaría preguntar cómo puedo limitar mi solicitud de API, por ejemplo, a 5 elementos solo porque actualmente, cuando accedo a una API, devuelve 20 elementos. pero quiero mostrar solo 5. En su mayoría, lo que encontré es simplemente recorrer todo el conjunto de objetos y no limitarlo a una cantidad de elementos.
Nota: no tengo control sobre la API porque solo estoy usando la API moviedb
Aquí está mi código:
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) }) }En primer lugar, verificaría si puede enviar una solicitud a su API para limitar la lista de resultados. No tengo una cuenta para esta API. Pero encontré esta solicitud:
https://api.themoviedb.org/5/list/{list_id}?page=1&api_key=<<api_key>>
Eso debe devolver 5 artículos.
Puedes cortar tu matriz en trozos
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) }) }otra forma de limitar 5, reemplazar
movies.forEach((movie) => {con
movies.forEach((movie, index) => { if(index >= 5) return;