Infinite Scroll + External Json Using App.request();

How to integrate infinite scroll with external json

using the code samples on this page…

Disclaimer, im not a JS expert so if you could make it simpler and basic,
and easier to understand… the better.

Well, the easiest way is to find the line in the sample code:
const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];

It’s a Javascript array. So, if you want to use external JSON (whether you’re downloading it from an external server, or its within a file on your own server) you could potentially create an array from the items within the JSON. Maybe you could use a for-each loop to push an array item from the JSON data you have.

This is how I do it.
for whatever reason, sometimes I get incorrect order of numbers like 1,2,3,5,6…
the codes I did below is not very error-proof.
i was looking for “proper way” in implementing infinite scroll with external json.
btw… this code below is placed on app.js , not on page like catalogue.html



function load_news() {
  app.preloader.show();
  $('#view-home .news-container').text("");
  let eid = sessionStorage.getItem("eid");
  app.request.json('https://malespecimen.com/coverage/api/news.php?eid=' + eid, function(data) {

    var newsListContent = '';
    if (data.news.length == 0) {
      newsListContent += '<li><p class="text-message" style="margin-top:100px;">Check back this page for updates!</p></li>';
    } else {
      ///////////////////////////////////////////////////////

      newsListContent += '<ul class="msc-list-clear">';
     for (var i = 0; i < data.news.length; i += 1) {
  
        var id = data.news[i].id;
        var ig_post = data.news[i].ig_post;

        newsListContent += '<li><div class="media-wrapper-instagram"><iframe src="https://www.instagram.com/p/' + ig_post + '/embed" width="640" height="720" frameborder="0" scrolling="no" allowtransparency="true"></iframe></div></li>';

      }
 
      //////////////////////////////////////////////////////
    }
    $('#view-home .news-container ul').html(newsListContent);
    app.preloader.hide();

    /*----- INFINITY ---------*/
    let allowInfinite = true;
    let lastItemIndex = $('#view-home .news-container .ms-list-clear li').length;
    console.log("before" + lastItemIndex);
    let maxItems = data.news.length;
    let itemsPerLoad = 3;
    var html = '';
    $('#view-home .infinite-scroll-content').on('infinite', function() {
      if (!allowInfinite) return;
      allowInfinite = false;

      setTimeout(function() {
        allowInfinite = true;

        if (lastItemIndex >= maxItems) {
          app.infiniteScroll.destroy('#view-play .infinite-scroll-content');
          $('#view-play .infinite-scroll-preloader').remove();
          $('#view-play .infinite-scroll-preloader').hide();
          return;
        } else {
          for (var i = lastItemIndex + 1; i <= lastItemIndex + itemsPerLoad; i++) {
            console.log("within for loopIndex (after):" + lastItemIndex);
          
            html += '<li><div class="media-wrapper-instagram"><iframe src="https://www.instagram.com/p/' + ig_post + '/embed" width="640" height="720" frameborder="0" scrolling="no" allowtransparency="true"></iframe></div></li>';
           
          }
           $('#view-home .news-container .ms-list-clear').append(html);
        }


        lastItemIndex = lastItemIndex + itemsPerLoad;
        console.log(" (after):" + lastItemIndex);

      }, 1000); 

    });
  });
}