Question

I have a JS Function which is called in document.ready. The intent is as it scrolls to the bottom window, it’ll load more from the JSON API.

The API has the parameter offset and limit. Offset controls which subset of results you are seeing. For ex. 20-40 would be offset=20 and limit controls how many you can view at once.

I thought I would approach this with a recursive function which calls itself each time the user goes to the bottom of the window, with window.scroll. Once they go to the bottom, it’ll increment the offset by 20 each time, then run the function again.

Problem: I can’t seem to get it to increment the variable by 20 to make this work. Thoughts?

function getData(offset) {
var jsonCallback = "&jsoncallback=?";
//var offset = 20;
//var offset += 20;
var limit = 20;

var characterURL = "http://api.example.com/character&byId=" + characterID + "&offset=" + offset + "&limit=" + limit;    

$.getJSON(characterURL + jsonCallback, function(data) {
    for (i=0; i < (data.data.results).length; i++) {

        var $characterUl = $("<ul>");
        $characterUl.appendTo("#characterComics");
        $("<li>").text(data.data.results[i].title).appendTo($characterUl);  
        $("<li>").text(data.data.results[i].id).appendTo($characterUl);  
        $("<li>").text(data.data.results[i].release_date).appendTo($characterUl);  
        if (data.data.results[i].release_date > 0) {
            $characterLi.text(data.data.results[i].issue_number).appendTo($characterUl);      
        }  
    }

    $(window).scroll(function() {
        if($(window).scrollTop() + $(window).height() > $(document).height() - 10) {
            while ((data.data.results).length === offset || (data.data.results).length > offset) {
                offset = offset+20;
                $("<div>").text(offset).appendTo("body");
                getComics(offset);
            }
        }
    });
   });
}

$(document).ready(function() {    
var $characterComics = $("<div>", {id : "characterComics"});
$characterComics.appendTo("body");
getData(0);
}); 

Answer 1

UPDATED
Read this more as a pseudo-code

function getData(offset) {
    var jsonCallback = "&jsoncallback=?",
    characterURL = "http://api.example.com/character&byId=" + characterID + "&offset=" + offset + "&limit=" + limit;    

    $.getJSON(characterURL + jsonCallback, function(data) {
        for (i=0; i < (data.data.results).length; i++) {
            var $listItem = $("<li>");
            listItem.append("<span>"+data.data.results[i].title+"</span>");
            listItem.append("<span>"+data.data.results[i].id+"</span>");
            listItem.append("<span>"+data.data.results[i].release_date+"</span>"); 
            if (data.data.results[i].release_date > 0) {
                listItem.append("<span>"+data.data.results[i].issue_number+"</span>");   
            }
            listItem.appendTo($characterUl);
            itemsLoaded++;
        }
   });
}

$(document).ready(function() {
    var $characterComics = $("<div>", {id : "characterComics"}),
        $characterUl = $("<ul>"),
        offset = 0,
        itemsLoaded = 0;
        limit = 20;
    $characterComics.appendTo("body");
    $characterUl.appendTo($characterComics);

    $(window).scroll(function() {
        if($(window).scrollTop() + $(window).height() > $(document).height() - 10) {
            if ("check here if you reached your offsets") {
                offset = offset+20;
                getData(offset);
            }
        }
    });
   // get your first set of data
   getData(0);
});