如何在单击按钮时一次从数组中加载 N 个项目

Question

我有一个对象数组：

const resourcesData = [
  {
    title: 'Title 01',
    description: 'Description for Title 01',
  },
  {
    title: 'Title 02',
    description: 'Description for Title 02',
  },
  {
    title: 'Title 03',
    description: 'Description for Title 03',
  },
  {
    title: 'Title 04',
    description: 'Description for Title 04',
  },
  {
    title: 'Title 05',
    description: 'Description for Title 05',
  },
];

目前使用模板文字将它们加载到 DOM 中：

function resourceTemplate(resource) {
  return `
    <div>
      <h2>${resource.title}</h2>
      <p>${resource.description}</p>
    </div>
  `;
}

function loadResources() {
  document.getElementById('resources').innerHTML = resourcesData
    .map(resourceTemplate)
    .join('');
}

当我一次加载所有这些时它可以工作。 如何一次只加载 2 个并且只在按钮单击时显示下一个 2？

为了显示 2 个项目，单击“加载更多”按钮，它将显示接下来的 2 个项目。 然后当它到达数组的末尾时，它将只显示一个，并且加载更多按钮将被隐藏。

---

根据要求更新我尝试过的内容 以前我尝试使用 for 循环首先对结果进行切片，如下所示：

console.log(resourcesData.length);
let result = [];

for (let i = 0; i < resourcesData.length; i += 2) {
  result = resourcesData.slice(i, i + 2);
  console.log(result);
}

我得到了 3 个数组，但我不确定如何跟踪在按钮单击时显示哪个数组。

Answer 1

您可以使用splice 从数组中提取一定数量的元素：

const resourcesData = [{"title":"Title 01","description":"Description for Title 01"},{"title":"Title 02","description":"Description for Title 02"},{"title":"Title 03","description":"Description for Title 03"},{"title":"Title 04","description":"Description for Title 04"},{"title":"Title 05","description":"Description for Title 05"}];

function resourceTemplate(resource) {
  return `
    <div>
      <h2>${resource.title}</h2>
      <p>${resource.description}</p>
    </div>
  `;
}

function loadResources() {
  document.getElementById('resources').innerHTML += resourcesData
    .splice(0, 2) // <-----------------------------------------------------
    .map(resourceTemplate)
    .join('');
    
  if (resourcesData.length === 0) { btn.style.display = 'none'; }
}

btn.addEventListener('click', loadResources);

<div id="resources"></div>
<button id="btn">Load resources</button>