1

Есть страница на ней есть 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()

1 ответ 1

3

Первое что пришло в голову, создать в кнопке или где угодно data-атрибут (например data-loaded-count) и каждый раз после загрузки обновлять его значение (старое + 5)в свою очередь выводить на экран только 5 элементов находящихся после ранее выведеных

var row = document.querySelector('tr');
document.querySelector('[data-loaded-count]').addEventListener('click', function() {
  var loaded = +this.getAttribute('data-loaded-count');
  var nextLoaded = loaded + 5;

  if (loaded >= arr.length) {
    console.log('nothing left...');
    return;
  }
  
  // тут использовано slice() чтобы скопировать массив 
  // у вас он будет каждый раз создаваться заново, поэтому не надо его копировать
  jsonGirls(arr.slice().splice(loaded, 5));
  this.setAttribute('data-loaded-count', nextLoaded);
});

function jsonGirls(jsonGirl) {
  jsonGirl.forEach(function(element) {
    let photoGirl = document.createElement('div');
    photoGirl.classList = 'img';

    photoGirl.innerText = element.text;
    row.insertAdjacentElement("BeforeEnd", photoGirl)
  });
}

var arr = [{
  "text": "Hello1"
}, {
  "text": "Hello2"
}, {
  "text": "Hello3"
}, {
  "text": "Hello4"
}, {
  "text": "Hello5"
}, {
  "text": "Hello6"
}, {
  "text": "Hello7"
}, {
  "text": "Hello8"
}, {
  "text": "Hello9"
}, {
  "text": "Hello10"
}, {
  "text": "Hello11"
}, {
  "text": "Hello12"
}, {
  "text": "Hello13"
}, {
  "text": "Hello14"
}, {
  "text": "Hello15"
}, {
  "text": "Hello16"
}, {
  "text": "Hello17"
}];
<input type="button" value="Load more" data-loaded-count="0" />
<table>
  <tr></tr>
</table>

6
  • Спасибо за помощь, не понял этого момента "у вас он будет каждый раз создаваться заново, поэтому не надо его копировать". 25 фев 2018 в 7:33
  • let jsonGirl = JSON.parse(requestGirls.responseText); вот тут вы каждый раз создаете массив со входнымми данными, тогда как у меня он всегда один и чтобы не модифицировать его я его копировал 25 фев 2018 в 8:08
  • Пожалуйста напишите подробнее. Каждый раз создается новый и как без копирования из него брать часть элементов? 25 фев 2018 в 8:33
  • arr.splice(loaded, 5) так 25 фев 2018 в 9:27
  • Спасибо за разъяснение 25 фев 2018 в 13:08

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.