Encountering an issue where a function is returning JSON data upon success. Attempting to implement infinite scroll functionality, the function prepares HTML for looping in another function. The server response includes JSON structured as follows:
{ "id" : 6,
"title" : "Store Title #1",
"movies" : [{ "id" : 1164,
"title" : "Movie 1",
"publishDate" : "1993-01-01T00:00:00",
"description" : "{long description...}" },
{ "id" : 8452,
"title" : "Movie 2",
"publishDate" : "1985-01-01T00:00:00",
"description" : "{long description...}" },
{ "id" : 6451,
"title" : "Movie 3",
"publishDate" : "1945-01-01T00:00:00",
"description" : "{long description...}" }]
}
Function that handles success:
function onsuccess(data) {
var libraryInfoHTML = '<h2 data-id="' + data.id + '">' + data.title + '</h2><ul></ul>';
var receivedData = data.movies;
var loopHTML =
'<li>' +
'<h3 class="clear"><span class="icons video-library video-icon"></span>' +
'<a href="#" title="' + receivedData[i].title + '" data-id="' + receivedData[i].id + '">' +
receivedData[i].title +
'</a>' +
'</h3>' +
'<h4 class="clear"><span class="icons publish-date"></span>' +
receivedData[i].publishDate +
'</h4>' +
'<p>' +
receivedData[i].description +
'</p>' +
'</li>';
infinityScroll(receivedData, loopHTML);
}
Infinite scroll function:
function infinityScroll(received_data, loop_HTML) {
var i=0;
var length = received_data.length;
var items_to_load = 10;
function loop() {
var html_maker = '';
for(; i<items_to_load; i++) {
html_maker +=
loop_HTML;
}
items_to_load += i;
$('#container ul').append(html_maker);
}
function scroller() {
if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.95){
loop();
}
}
$(window).scroll(scroller);
}
The error arises in the first function due to "i" being undefined. Looking to pass the content of "loopHTML" to "function loop()" and iterate over "receivedData[i]". Considering converting the "loopHTML" content to a string but unsure how to handle unstring locations for "receivedData[i]". Seeking suggestions on a better approach without plugins for implementing simple infinite scroll. Thank you in advance!