Как подгружать по 4 объекта?

Question

У меня есть массив из 24 объектов, но выводится только первые 8, остальные должны подгружаться по 4 штуки при нажатии на кнопку (Посмотреть ещё), как правильно это реализовать?

let kitchenList = document.querySelector('.type-wardrobe');
let buttonMore = document.getElementById("btnMore");
let maxItems = 8;

function outputKitchens() {
    for (let i = 0; i < maxItems; i++) {
            let kitchenItem = document.createElement('li');
            kitchenItem.classList.add('type');
            kitchenList.append(kitchenItem);
    }
}

Answer 1

Можно так:

Запустить функцию, которая отрисует первые 8; outputKitchens();
При каждом клике, считать, сколько на сейчас элементов li в списке и их кол-во добавить в переменную.

let lastElem = kitchenList.getElementsByTagName('li').length;

Если их меньше 24, то отрисовать 4

buttonMore.addEventListener('click', ()=>{
if(lastElem < arr.length) {
for (let i = 0; i < 4; i++) {...}
}

В конце цикла отрисовки сделать lastElem ++

Answer 2

Вариантов решения вашего вопроса не мало. Со счетчиком не самый элегантный, но, понятный.

let arr = [
  {title: 'one'},
  {title: 'two'},
  {title: 'three'},
  {title: 'four'},
  {title: 'five'},
  {title: 'six'},
  {title: 'seven'},
  {title: 'eight'},
  {title: 'nine'},
  {title: 'ten'},
];

let kitchenList = document.querySelector('.type-wardrobe');
let buttonMore = document.getElementById('btnMore');
let firstItems = 4;
let otherItems = 2;

let tempCounter = 0;

function outputKitchens(arr, count) {
  for (let i = 0; i < count; i++) {
    if (tempCounter >= arr.length) return;

    let kitchenItem = document.createElement('li');
    kitchenItem.classList.add('type');
    kitchenItem.innerHTML = arr[tempCounter++].title;
    kitchenList.append(kitchenItem);
  }
}

outputKitchens(arr, firstItems);

buttonMore.addEventListener('click', () => outputKitchens(arr, otherItems));

<div class="type-wardrobe"></div>

<button id="btnMore" type="button">More</button>

Answer 3

Объектное решение, которое при необходимости будет достаточно легко адаптировать к выводу/обновлению данных в разных местах документа, к подгрузке данных AJAX'ом, и т.д.:

class KitchensProvider {
  constructor(itemsData) {
    Object.assign(this, { items: itemsData, index: 0 });
  }
  renderTo(containerEl, params) {
    const { from, count = 1, as = 'li', classes = 'type' } = params || {};
    const fromIdx = +from || this.index,
          toIdx   = fromIdx + +count,
          slice   = this.items.slice(fromIdx, toIdx);
    this.index += slice.length;
    return slice.map(itm => {
      const el = document.createElement(as);
      el.classList.add(...classes.split(/\s+/));
      el.append(itm);
      return containerEl.appendChild(el);
    });
  }
}

const data = 'Lorem-ipsum-dolor-sit-amet'.split('');
const kitchenList = document.querySelector('.type-wardrobe'),
      kitchensProv = new KitchensProvider(data);
kitchensProv.renderTo(kitchenList, { count: 8 });
document.getElementById('btn-more').addEventListener('click', evt => {
  kitchensProv.renderTo(kitchenList, { count: 4 });
});

ul { list-style: none; display: flex; }
li { padding: 0.2rem 0.3rem; border: 1px solid #ccc; }
li + li { margin-left: -1px; }

<button id="btn-more">More</button>
<ul class="type-wardrobe"></ul>

БЛОГ НА HUSL

Как подгружать по 4 объекта?

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