Javascript：如何显示数组中的一定数量的项目并在单击按钮时显示其他项目？

Question

Implementation:

I have an HTML page with items container:

<section class="products">
  <div class="container">
    <h2 class="products-title">Some title</h2>
    <div class="products-items"></div>
    <button class="products-btn">Show more</button>
  </div>
</section>

I have a data.js file with an array of items (16 items), here is an example:

export const products = [
    {
      id: 0,
      name: 'Product 1',
      price: 23,
      category: 'Category 1',
      imgSrc: './images/product-photo.jpg',
    },
];

I parsed data.js file using .map() to populate 'products-items' div:

const displayProducts = products => {
  const productsContainer = document.querySelector('.products-items');
  const newProducts = products.map(product => {
    const {
            id,
            name,
            price,
            category,
            imgSrc,
          } = product;
    return `
      <div class="product-item" data-id="${id}">
        <p>${name}</p>
        <p>${price}</p>
        <p>${category}</p>
        <img src="${imgSrc}" alt="product photo">
     </div>
    `;
  }).join('');
  productsContainer.innerHTML = newProducts;
};

export default displayProducts;

In app.js I've imported products variable and displayProducts function.

If I pass products variable to display products like this displayProducts(products) , it will show all 16 items.

Desired result:

What I need is to show only first 4 items and load 4 new items each time user clicks 'Show more' button. In the end all 16 items should be displayed and 'Show more' button should be hidden.

When I had all 16 items as static data in HTML. I used CSS to hide items by default: .product-item {display: none}

Then I added class 'product-item--active' to first 4 items to display them by default: .product-item--active {display: block} and used this functionality to add active class for remaining items on button click:

const showMoreBtn = document.querySelector('.products-btn');
let currentItems = 4;
showMoreBtn.addEventListener('click', e => {
    const elementList = [
        ...document.querySelectorAll('.products-items .product-item'),
    ];
    for (let i = currentItems; i < currentItems + 4; i++) {
        if (elementList[i]) {
            elementList[i].classList.add('product-item--active');
        }
    }
    currentItems += 4;

    // Hide load more button after all items were loaded
    if (currentItems >= elementList.length) {
        e.target.style.display = 'none';
    }
});

Issue:

But now, when items load dynamically, this functionality does not work.

I figured out how to display first 4 items using .slice() :

let firstItems = products.slice(0, 4);

displayProducts(firstItems);

But, I can't figure out how to load new items on button click and hide it once all item displayed.

Update (Solved): I appreciate provided answers with good explanation and examples. Thank you. After examining them I have the following solution (in case if someone may find it useful). Also, I removed redundant 'product-item--active' class from CSS, now there is no need to hide items by default:

import { products } from './data.js';
import displayProducts from './components/displayProducts.js';

const showMoreBtn = document.querySelector('.products-btn');

let currentItems = 0;

const displayNextFour = () => {
    displayProducts(products.slice(currentItems, currentItems + 4));
    // Display next 4 items until their amount exceeds 
    // the array length 
    if (!(currentItems + 4 > products.length)) {
        currentItems += 4;
    }
    // Remove event listener from 'Show more' button and
    // hide it after all items from the array are displayed
    if (currentItems === products.length) {
        showMoreBtn.removeEventListener('click', displayNextFour);
        showMoreBtn.style.display = 'none';
    }
};

displayNextFour();

showMoreBtn.addEventListener('click', displayNextFour);

Answer 1

Feel free to play with this minimal reproducable example using an array of 16 random strings for the content to display. It uses insertAdjacentHTML to append a block of 4 items on button click. That prevents overwriting all html on every click. The click handler is assigned using Event Delegation . If the number of items shown equals the available items, the button is disabled.

A second idea may be to hide all but [ pageSize ] items and on button click unhide the next [ pageSize ] items. See this stackblitz snippet . That snippet is more generic: it enables a variable amount of items and setting a page size (number of items to show subsequently). It requires no extra variables for tracking.

 initRandomStrExt(); document.addEventListener(`click`, handle); const fakeArray = [...Array(16)].map(v => String.getRandom(32)); // show first 4 items on page load addFourItems(fakeArray); function handle(evt) { if (evt.target.classList.contains(`products-btn`)) { return addFourItems(fakeArray); } } function addFourItems(fromArr) { // determine n of currently visible items const start = document.querySelectorAll(`.product-item`).length; // disable the button if all items will be visible after running this if (start === fromArr.length - 4) { document.querySelector(`.products-btn`).setAttribute(`disabled`, true); } // append 4 items of the array to the .product-items container document.querySelector(`.products-items`) .insertAdjacentHTML(`beforeend`, `<div>${fromArr.slice(start, start + 4) // ^ slice the next 4 items from the array .map((item, i) => `<div class="product-item">${i + 1 + start} - ${ item}</div>`).join(``)}</div>`); } // for demo, random string helper function initRandomStrExt() { if (String.getRandom) { return; } const characters = [...Array(26)] .map((x, i) => String.fromCharCode(i + 65)) .concat([...Array(26)].map((x, i) => String.fromCharCode(i + 97))) .concat([...Array(10)].map((x, i) => `${i}`)); const getCharacters = excludes => excludes && characters.filter(c => !~excludes.indexOf(c)) || characters; String.getRandom = (len = 12, excludes = []) => { const chars = getCharacters(excludes); return [...Array(len)] .map(() => chars[Math.floor(Math.random() * chars.length)]) .join(""); }; };

 <section class="products"> <div class="container"> <h2 class="products-title">Some title</h2> <div class="products-items"></div> <p><button class="products-btn">Show more</button></p> </div>

Answer 2

You can create a global variable to keep track of which items should be dispalyed eg current_index . Then create a function eg displayNextFour() to display four items each time and update current_index accordingly. Then on button click call displayNextFour() function.

let current_index = 0

const displayNextFour = () => {
  displayProducts(products.slice(current_index, current_index+4));
  //console.log(products.slice(current_index, current_index+4))
  if(current_index + 4 <= products.length)
    current_index+=4
}

(In displayProducts create elements with product-item--active class)