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.
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);
});
});
}