Load items 4 in 4 in a javascript loop

Navigation
0

Personal I'm making a request in an API that returns me some events, but I need only 4 items to be displayed first, and if a "See More" button is clicked .. should appear 4 more items at a time .. I have the following code: 

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

     });

Thank you!

    
asked by anonymous 04.07.2018 / 22:25

1 answer

4

What you need is what you call chunks , which basically is to split a list into smaller, defined-size lists. To do this, simply use the slice of Array method to get each slice of your entire list. To facilitate, I have created a generator that will iterate over the sub-lists: 

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

So, you just increment with the logic that when the user presses the "See More" button, you look for the next generator value and add it to the list of elements. 

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>
    
04.07.2018 / 22:41
___ ___ erkimt The third parameter filter_input is mandatory in PHP? ______ qstntxt ___
%pre%

I took a look at the PHP manual but did not say anything, I saw a guy not using the third parameter and then I was in doubt if it is mandatory or not

    
______ azszpr313414 ___

It's not, check it out in the documentation: link

%pre%

These %code% indicate optional arguments, in PHP there are predefined arguments, when you omit in your use php passes the default value, which in the specific case of this function would be %code% , the code you posted shows that the person has changed %code% by %code% , that is, each one is for one thing, just see the values supported in link

As it says in the doc:

  

If omitted, %code% will be used, which is equivalent to %code% . This will result in no filtering taking place by default.

     

If omitted, it will use %code% , which is equivalent to %code% . This will result in an unfiltered value.

Just to note, %code% is part of the link , this filter in the case escapes / converts characters such as: %code% , %code% , %code% , among others that the ASCII value is less than 32, ie something like:

%pre%

Will print this:

%pre%

What are HTML entities, which when rendered on the page actually display %code% , but without affecting HTML.

    
______ azszpr313406 ___

The documentation of the %code% function says the following about the third parameter:

  

"If omitted, FILTER_DEFAULT will be used, which is equivalent to FILTER_UNSAFE_RAW. This will result in no filtering taking place by default."

That is, the third parameter is not required and can be omitted. Although this does not filter the value in fact.

    
___ How to access a jquery without id?