slicing array list five elements at a time in javascript

Question

UPDATE: The below code does not work the way I wanted to, like as I mention below, it should show five items at a time when the user clicks on the button.

I'm trying to use javascript slice method (please suggest if this is not the right way to use), the array list show five array item at a time and I have created the codepen example to show what I'm trying to do

Let's assume I have 20 records, if the user click on first time, I should be getting 1-5 array items if the user click on second time, I should be getting 5-10 .....so on and so forth.

https://codepen.io/TLJens/pen/NPZyYR

The code here:

$('#loading').hide();

var counts = 0;
var displayCount = 5;
var starting = 0;
var data = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16];

function slicemydata(sstart, totalsize, eend) {  
    var items = []; debugger;
    if (totalsize <= data.length) {
        if (eend == 0) {
          items = data.slice(sstart,totalsize);
        } else { 
          if (sstart > eend) {
            eend = data.length;
          }
          items = data.slice(sstart, eend);
          sstart =  displayCount + 5;
        }
    }
    console.log(items);
  $('.js-lazy-load-data').append(items);
}

$('.js-lazy-load').click(function () {
 
  counts++;
  slicemydata(starting,data.length,displayCount);
 
    $('.js-lazy-load').fadeOut();
  
    // Minor timeout before showing loader
   // setTimeout(function () {
   //     $('#loading').fadeIn();
   // }, 400); 
  
    // Simulate server call by showing loading gif  
    // for 2.5 seconds before displaying results
    //setTimeout(function () {
    //    $('#loading').fadeOut();
    //}, 2600); 
  
    // Display results after 3 seconds
    setTimeout(function () {
        //$('.js-lazy-load-data').append(data);
        $('.js-lazy-load').show();
    }, 1000);  
});

Answer 1

This might be a use case for Generators and generator functions; the OP's task at least makes a good practical exercise ...

function* createChunkGenerator(
  itemList, chunkSize = 1, chunkCount = 0
) {
  // sanitize and decouple (shallow copy) the passed
  // array reference, thus one can `splice` the list
  // without mutating the original array.
  itemList = Array.from(itemList ?? []);
  chunkSize = Math.max(chunkSize, 1);

  while (itemList.length >= 1) {
    ++chunkCount;

    yield {
      chunkCount,
      itemList: itemList.splice(0, chunkSize),
    };
  }
}


let chunkGenerator = createChunkGenerator(
  [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13], 5
);
let chunks;

console.log('...automatically tiggered `next` based iteration...');

while (chunks = chunkGenerator.next().value) {
  const { chunkCount, itemList } = chunks;

  console.log({ chunkCount, itemList });
}


chunkGenerator = createChunkGenerator(
  [1, 2, 3, 4, 5, 6, 7, 8], 6
);
console.log('...explicitly (e.g. event) triggered `next` based iteration...');
console.log(
  chunkGenerator.next()
);
console.log(
  chunkGenerator.next()
);
console.log(
  chunkGenerator.next()
);
console.log(
  chunkGenerator.next()
);

.as-console-wrapper { min-height: 100%!important; top: 0; }

The below DOM / DOM event implementation demonstrates the handy usage of a generator based paginator/pagination.

function* createChunkGenerator(
  itemList, chunkSize = 1, chunkCount = 0
) {
  // sanitize and decouple (shallow copy) the passed
  // array reference, thus one can `splice` the list
  // without mutating the original array.
  itemList = Array.from(itemList ?? []);
  chunkSize = Math.max(chunkSize, 1);

  while (itemList.length >= 1) {
    ++chunkCount;

    yield {
      chunkCount,
      itemList: itemList.splice(0, chunkSize),
    };
  }
}

function handleCreateLoadItemsFromBoundData({ currentTarget }) {
  const { generator: chunkGenerator, elmOutput } = this;
  const chunks = chunkGenerator.next().value ?? null;
  
  if (chunks !== null) {
    const { chunkCount: loadCount, itemList: loadItems } = chunks;

    elmOutput.value =
      `... loadCount: ${ loadCount }, loadItems: ${ loadItems } ...`;
  } else {
    elmOutput.value =
      '... no more load items ...';

    currentTarget.disabled = true;
  }
}
document
  .querySelector('button')
  .addEventListener(
    'click',
    handleCreateLoadItemsFromBoundData.bind({
      generator: createChunkGenerator(
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13], 5
      ),
      elmOutput: document.querySelector('output'),
    })
  );

<button>load items</button>
=>
<output>...</output>