I have an Array of Objects:
const myArray = [
{myObject: "1"},
{myObject: "2"},
{myObject: "3"},
{myObject: "4"},
{myObject: "5"},
]
I have created a pagination system for this Array of Objects using the following code:
function paginator (items, page, per_page) {
let offset = (page - 1) * per_page;
let paginatedItems = items.slice(offset).slice(0, per_page);
let total_pages = Math.ceil(items.length / per_page);
return {
page: page,
per_page: per_page,
pre_page: page - 1 ? page - 1 : nul,
next_page: (total_pages > page) ? page + 1 : nul,
total: items.length,
total_pages: total_pages,
data: paginatedItems
};
}
When I have loged the results of this pagination system to the console, it has worked as expected. I now want to display each of the objects in myArray using this pagination system. How could I do this?
I have tried to use the append and append child functions in order to dislpay the objects on screen. I have also looked at multiple different videos and articles and have not been able to find a solution.
>Solution :
Fixing the nul->null
I think this will help you
const myArray = [
{myObject: "1"},
{myObject: "2"},
{myObject: "3"},
{myObject: "4"},
{myObject: "5"},
];
function paginator(items, page, per_page) {
let offset = (page - 1) * per_page;
let paginatedItems = items.slice(offset).slice(0, per_page);
let total_pages = Math.ceil(items.length / per_page);
return {
page: page,
per_page: per_page,
pre_page: page - 1 ? page - 1 : null,
next_page: (total_pages > page) ? page + 1 : null,
total: items.length,
total_pages: total_pages,
data: paginatedItems
};
}
window.addEventListener("DOMContentLoaded", () => {
const container = document.getElementById("container");
const prev = document.getElementById("prev");
const next = document.getElementById("next");
let currentPage = 1;
const perPage = 2;
const lastPage = Math.floor(myArray.length/perPage)+1;
document.getElementById("nav").addEventListener("click", (e) => {
const dir = e.target.id === "next" ? 1 : -1;
currentPage += dir;
if (currentPage<1) currentPage = 1;
if (currentPage === myArray.length) currentPage = myArray.length-1;
prev.disabled = currentPage===1;
next.disabled = currentPage===lastPage;
container.innerHTML = paginator(myArray,currentPage,perPage).data.map(item => `<div>${item.myObject}</div>`).join("");
});
prev.click(); // start
});<div id="container"></div>
<nav id="nav">
<button type="button" id="prev">Prev</button>
<button type="button" id="next">Next</button>
</nav>