Есть страница на ней есть 5 элементов и кнопка загрузить ещё
.
Имеется JSON
с 15 элементами. При клике на кнопку выводятся все 15 элементов.
Вопрос, как организовать вывод по 5 элементов?
[
{
"text": "Hello",
"img" : "url('images/img-6.jpg')"
},
{
"text": "Hello",
"img" : "url('images/img-7.jpg')"
},
{
"text": "Hello",
"img" : "url('images/img-8.jpg')"
},
{
"text": "Hello",
"img" : "url('images/img-9.jpg')"
},
{
"text": "Hello",
"img" : "url('images/img-11.jpg')"
},
{
"text": "Hello",
"img" : "url('images/img-12.jpg')"
},
{
"text": "Hello",
"img" : "url('images/img-13.jpg')"
},
{
"text": "Hello",
"img" : "url('images/img-14.jpg')"
},
{
"text": "Hello",
"img" : "url('images/img-15.jpg')"
},
{
"text": "Hello",
"img" : "url('images/img-16.jpeg')"
},
{
"text": "Hello",
"img" : "url('images/img-17.jpg')"
},
{
"text": "Hello",
"img" : "url('images/img-18.jpg')"
},
{
"text": "Hello",
"img" : "url('images/img-0.jpg')"
},
{
"text": "Hello",
"img" : "url('images/img-0.jpg')"
},
{
"text": "Hello",
"img" : "url('images/img-0.jpg')"
}
]
function jsonGirls() {
let requestGirls = new XMLHttpRequest();
requestGirls.open('get', 'girls.json', true);
requestGirls.send();
requestGirls.onreadystatechange = () => {
if (requestGirls.readyState === 4) {
if (requestGirls.status === 200) {
let currentPage = 5;
let jsonGirl = JSON.parse(requestGirls.responseText);
let fullLength = lengthGirls.length + jsonGirl.length;
btn.onclick = function() {
jsonGirl.forEach(function(element) {
let photoGirl = document.createElement('div');
photoGirl.classList = 'img';
let photoGirlHover = document.createElement('div');
photoGirlHover.classList = 'img-hover';
let photoGirlText = document.createElement('div');
photoGirlText.classList = 'img__title';
photoGirlHover.insertAdjacentElement("afterbegin", photoGirlText)
photoGirl.insertAdjacentElement("afterbegin", photoGirlHover)
photoGirl.addEventListener("mouseover", function() {
this.classList.add('img--active');
})
photoGirl.addEventListener("mouseout", function() {
this.classList.remove('img--active')
})
photoGirl.style.backgroundImage = element.img;
photoGirlText.innerText = element.text;
row.insertAdjacentElement("BeforeEnd", photoGirl)
});
}
} else {
alert("Загрузите ещё раз");
}
}
};
}
jsonGirls()