0

Pessoal estou fazendo uma requisição em uma API que me retorna alguns eventos, porem eu preciso que só seja exibido 4 itens primeiramente, e se um botão de "Veja Mais" for clicado.. deve aparecer mais 4 itens por vez.. tenho o seguinte código:

    jQuery.ajax({
        type: 'GET',
        url: 'url'
    }).then(function(res) {
        //Dando um console aqui consigo ver todos os itens listados

       // Como consigo validar para exibir somente 4 itens..
       // E em seguida ao clicar exibir mais 4 ?

        res.events.map(function(item) {
           // Resumi essa parte..
           // Aqui faço o loop de todos os itens
           // Monto ele em uma div e renderizo no html.
        });

     });

Obrigado!

2
  • Queres fazer essa paginação no cliente ou servidor?
    – Sergio
    4/07/2018 às 20:28
  • No client, pois não tenho acesso ao código da API.
    – wDrik
    4/07/2018 às 20:29

1 Resposta 1

5

O que você precisa é o que chamam de chunks, que basicamente é dividir uma lista em lista menores, de tamanho máximo definido. Para tal, basta utilizar o método slice de Array para obter cada fatia da sua lista completa. Para facilitar, criei um gerador que iterará sobre as sub-listas:

function* paginate(list, size) {
  for (let i = 0, j = list.length; i < j; i += size) {
    yield list.slice(i, i+size)
  }
}

const eventos = [
  'Evento 01',
  'Evento 02',
  'Evento 03',
  'Evento 04',
  'Evento 05',
  'Evento 06',
  'Evento 07',
  'Evento 08',
  'Evento 09',
  'Evento 10',
  'Evento 11',
  'Evento 12'
]

const paginas = paginate(eventos, 4)

for (let pagina of paginas) {
  console.log(pagina)
}

Assim, bastaria você incrementar com a lógica de que quando o usuário pressionar o botão "Ver Mais", você busque o próximo valor do gerador e adicione à lista de elementos.

function* paginate(list, size) {
  for (let i = 0, j = list.length; i < j; i += size) {
    yield list.slice(i, i+size)
  }
}

const eventList = [
  'Evento 01', 'Evento 02', 'Evento 03', 'Evento 04',
  'Evento 05', 'Evento 06', 'Evento 07', 'Evento 08',
  'Evento 09', 'Evento 10', 'Evento 11', 'Evento 12'
]

const list = document.getElementById('lista')
const button = document.getElementById('btn')
const pages = paginate(eventList, 4)

button.addEventListener('click', function() {
  const page = pages.next()
  const events = page.value
  
  if (page.done) {
    this.disabled = true;
    return;
  }
  
  for (let event of events) {
    list.innerHTML += `<li>${event}</li>`
  }
});
<ul id="lista"></ul>
<button id="btn">Ver Mais</button>

7
  • 1
    Interessante uso de geradores!
    – Isac
    4/07/2018 às 20:45
  • Legal brother, vou tentar implementar essa logica, obrigado.
    – wDrik
    4/07/2018 às 22:53
  • Brother esse exemplo. é bem próximo do que preciso.. porem no projeto que estou fazendo manutenção, não tem configurado o EcmaScript.. como consigo fazer o mesmo utilizando o javascript puro? Obrigado!
    – wDrik
    6/07/2018 às 1:32
  • @wDrik acho que basta só usar var no lugar de const e fazer um laço normal no lugar de for .. of
    – Woss
    6/07/2018 às 1:34
  • Certo.. só não entendi a parte que vc utiliza um ' * ' na função.. e um yield no laço for, deu uma pesquisada mais não entendi o conceito e nem como aplicar isso no javascript mais básico. me desculpe mais sou um pouco leigo. obrigado!
    – wDrik
    6/07/2018 às 1:38

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .