Как ограничить вывод массива и показывать остальные при клике на кнопку "Показать ещё"

Question

Допустим есть массив:

let data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18];

Изначально массив должен отображатся от 1 до 6, при клике на кнопку Показать ещё должно добавлялятся ещё 6 данных из массива и т.д. В конце когда массив полностью отобразится спрятать кнопку Показать ещё

Answer 1

const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]

let shownCount = 0;
const step = 6;
const itemsListEl = document.getElementById('items-list');
const buttonEl = document.getElementById('show-more-button');
showMore();

buttonEl.addEventListener('click', showMore);

function showMore() {
  if (shownCount + step >= items.length) {
    buttonEl.hidden = true;
  }
  const toBeShownCount = Math.min(step, items.length - shownCount);
  for (let i = shownCount; i < shownCount + toBeShownCount; i++) {
    const listEl = document.createElement('li');
    listEl.textContent = items[i];
    itemsListEl.append(listEl);
  }
  shownCount += toBeShownCount;
}

<button id="show-more-button">Показать ещё</button>
<ul id="items-list">
</ul>

Answer 2

let data = [1, 2, 3, 4, 5, 6, 7];
function generate() {
  console.log(data.splice(0, len));
}

Для большей гибкости (хотя по сути и незачем в данном случае) можно использовать генератор:

let data = [1, 2, 3, 4, 5, 6, 7];
function* generate() {
  yield data.splice(0, len);
}

function print(){
    console.log(generate().next().value);
}

БЛОГ НА HUSL

Как ограничить вывод массива и показывать остальные при клике на кнопку "Показать ещё"

Ответы (2 шт):