Add a button after a loop has iterated a specific number of times

I have created 3 variables:

let first_product = 0;
let second_product = 20;
let page_number = 1;

I have then looped through an Array:

for (let i of myArray) {
    // Perform actions
}

Once the for loop has looped through 20 items, I want to display the next 20 items onto a new page. I have done this using the following code:

let paginated_products = products.slice(first_product, second_product);

for (let i of myArray) {
    // Perform Actions

    if (i === second_product) {
        let button = document.createElement('button');
        button.innerHTML = page_number;
        page_number += 1;
        document.getElementById('nav-buttons').appendChild(button);
        first_product += 20;
        second_product += 20;
    }
}

However, the buttons are not displayed.

If I remove the if condition, a new button is created each time a loop iteration is run.

How could I cause a buttons to be shown only when the loop is running the iteration of the value second_product (when the loop is at iteration 20, 40, 60 etc).

If you have an array of products and you need to determine to which page belongs the current product you are iterating, you need to just do the math:

const pageNumber = Math.floor(iProduct / productsPerPage)+1;  

And to determine when the page turns to the next, still while iterating, you can still do the math using the modulo operator:

if(iProduct % productsPerPage == 0){

Here in this demo I show how to iterate over the products array and render the buttons for the correspondent page:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

//builds the products array with 100 objects
const products =
  ((n)=>{
    const a = [];
    for(let i=1;i<=n;i++){ a.push({cod:i}); }
    return a;
  })(100);

processProducts(products, 20);

/**
 * Loops through all the passed products and renders the buttons for each page
 */
function processProducts(products, productsPerPage){
  //for each single product in products
  iProduct = 0;
  for (let product of products) {  
  
    //[perform Actions on the current product]
  
    //here I determine which page the current product belongs to  
    const pageNumber = Math.floor(iProduct / productsPerPage)+1;  

    //if the current product is the first of its page
    if(iProduct % productsPerPage == 0){
      //render a button for the correspondent page
      let button = document.createElement('button');
      button.innerHTML = pageNumber;
      document.getElementById('nav-buttons').appendChild(button);         
    }      

    //increment the product index
    iProduct++;
  }
}

<!-- language: lang-html -->

<div id="nav-buttons"></div>

<!-- end snippet -->

One possible approach was to write a function which does create an array of array-chunks from any provided array and provided chunk size. Creating chunks is based on the modulo/remainder (%) operator and e.g a reduce task.

The following steps then would be ...

• Creating an array of product batches from the products array by passing it to the chunks creating function.

• Iterating the array of product batches via e.g. forEach where the index parameter of the callback function equals the page number value less 1 (hence index is zero based).

  While iterating the product batches one ...

  • should take care of the rendering of the pagination buttons.
  • could take care of each product item of the currently processed batch.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function chunkArray(arr, chunkCount) {
  return arr.reduce((list, item, idx) => {
    if (idx % chunkCount === 0) {

      list.push([ item ]);
    } else {
      // list.at(-1).push(item);
      list[list.length - 1].push(item);
    }
    return list;
  }, []);
}

const products = Array
  .from({ length: 14 }, (_, idx) => `product_${ idx + 1 }`);

const productBatches = chunkArray(products, 5);

console.log({
  products,
  productBatches,
});

function createPaginationButton(pageNumber) {
  let elm = document.createElement('button');
  elm.textContent = pageNumber;
  document.querySelector('#nav-buttons').appendChild(elm);
}
productBatches
  // - process each product batch.
  .forEach((batch, batchIndex) => {

    // - for example create a paginated
    //   list of products per batch.

    batch.forEach((product, productIndex) => {
      // - do whatever needs to be done
      //   with/to each product item.
    });

    createPaginationButton(batchIndex + 1);
  });

<!-- language: lang-html -->

<div id="nav-buttons"></div>

<!-- end snippet -->