如何在单击按钮时一次从数组中加载 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 个项目，单击 'Load More' 按钮，它将显示接下来的 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>

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

How to load N number of items from array at a time on button click

javascript

arrays

template-literals