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)
})
}