Cycling an array on click

Question

I have an array that has more than 12 elements, i.e.[ a,b,c,d,e,f,g,h,i,j,k,l]

In UI below this is how I want it to be displayed in a 3 X 3 grid.

a b c d e f g h <>

Where <> is a load more button

On each subsequent load more button click I need to display like

i j k l a b c d <>

and so on

e f g h i j k l <>

Basically I want to loop into the same array. At a time 8 elements will be shown along with <> button. I have the logic to display in grid ready, but load more I am having difficulty. Any guidance on how should I proceed?

Answer 1

I think you need something like this:

var start = 0;
var arr = [ a,b,c,d,e,f,g,h,i,j,k,l];

function nextChunk(howMany) {
    var result = [];
    while (howMany--) {
        result.push(arr[start]);
        start = (start + 1) % arr.length;
    }
    return result;
}