如何在单击按钮时一次从数组中加载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>