Issue looping through all of the elements in an Array JavaScript

I have an Array of objects:

let myArray = [
    {myParagraph: "This is paragraph 1"},
    {myParagraph: "This is paragraph 2"},
    {myParagraph: "This is paragraph 3"},
    {myParagraph: "This is paragraph 4"},
    {myParagraph: "This is paragraph 5"},
]

I want to loop through and display all of these objects. These objects should be paginated. To do this, I used this code:

let page = 1;
let button_number = 1;

let first_element_shown = 0;
let last_element_shown = 10;

let number_of_pages = Math.ceil(myArray.length / 10);

for (let i of myArray) {
    for (let j = 0; j < number_of_pages; j++) {
        for (let k = first_element_shown; k < last_element_shown; k++) {
            let card = document.createElement('div')
            let myParagraph = document.createElement('p');
            myParagraph.innerText = i.myParagraph;
            card.appendChild('myParagraph')
            document.getElementById("example_DIV").appendChild(card);
           }
    }
}

However, this loops through and displays the same objects multiple times. Is there a way to loop through all of the objects in myArray without using the for (let i of myArray) line in order to stop the same objects from showing multiple times.

You need to set

1. pageSize
2. page
3. start equal to (page - 1) * pageSize
4. end equal to start + pageSize
5. use slice method to slice the shown part in the array.

This is an example.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let myArray = [{
myParagraph: "This is paragraph 1"
},
{
myParagraph: "This is paragraph 2"
},
{
myParagraph: "This is paragraph 3"
},
{
myParagraph: "This is paragraph 4"
},
{
myParagraph: "This is paragraph 5"
},
{
myParagraph: "This is paragraph 6"
},
{
myParagraph: "This is paragraph 7"
},
{
myParagraph: "This is paragraph 8"
},
{
myParagraph: "This is paragraph 9"
},
{
myParagraph: "This is paragraph 10"
},
{
myParagraph: "This is paragraph 11"
},
{
myParagraph: "This is paragraph 12"
},
{
myParagraph: "This is paragraph 13"
},
{
myParagraph: "This is paragraph 14"
},
]
let pageSize = 3;
let page = 1;
const elementsContainer = document.querySelector('.elements-container');
const next = document.querySelector('#next');
const prev = document.querySelector('#prev');
const changePageNumber = (pageValue) => {
console.log(pageValue)
let page = pageValue;
let start = (page - 1) * pageSize;
let end = start + pageSize;
let shownElements = myArray.slice(start, end);
elementsContainer.innerHTML = '';
shownElements.forEach(item => {
const div = document.createElement('div');
div.textContent = item.myParagraph;
elementsContainer.append(div);
})
}
next.addEventListener('click', () => changePageNumber(++page));
prev.addEventListener('click', () => changePageNumber(--page));
changePageNumber(page)

<!-- language: lang-css -->

.elements-container {
margin-top: 20px;
border: 1px solid red;
}

<!-- language: lang-html -->

<button id="next">Next</button>
<button id="prev">Previous</button>
<div class="elements-container">
</div>

<!-- end snippet -->

let page = 1;
let button_number = 1;
let count = 0;
let first_element_shown = 0;
let last_element_shown = 10;
let number_of_pages = Math.ceil(myArray.length / 10);
for (let j = 0; j < number_of_pages; j++) {
for (let k = first_element_shown; k < last_element_shown & count<myArray.length; k++) {
let card = document.createElement('div')
let myParagraph = document.createElement('p');
myParagraph.innerText = myArray[count].myParagraph;
card.appendChild(myParagraph)
document.getElementById("example_DIV").appendChild(card);
count++
}
}

While this isn't perfect, it fixes some of your issues and you can probably figure out the rest from there.