Unknown amount of Ajax Request inside loop

Question

So here is my problem (and I have tried several suggestions found here at stackOverflow):

Scenario:

I am using the Gitlab API and I want to list all the "issues" of the bug tracker present on the system for a given project.

Problem:

This is all fine and good, however there is a paging system to do this since the ajax requesst is limited to 100 entries per response.

So I have to do something like this:

$.ajax({
    url: "https://mygitlabURL/api/v3/projects/97/issues",
    type: "GET",
    data: {
        private_token: "mytoken",
        per_page: 100,
        page: 1
    }

This will give me back 100 entries. What I need to do is add these entries to a list, and check: "was there fewer than 100 entries in the response?" if so I can stop doing requests.

I need however to get the complete list before I can move on with my code, so I tried using $.when() function and do my requests in a function of its own. In this function I have tried using:

• closures like in this answer
• recursion like suggested in another answer (don't have the link)
• while loop since, oh well, why not

The problem with all the solutions is that, beeing asynchronous, I end up receiving a response and my $.when() function executes before I have any response from the server.

Is there a way to do this?

Here is the latest code (with recursion) I have tried:

$(function () {
    $("button").on("click", function () {
        $.when(func1(), func2()).then(finishedFunc);
    });
});

var func1 = function (pageNr) {
    pageNr = pageNr || 1;

    megaList = [];
    // Get server values
    $.ajax({
        url: "https://mygitlabURL/api/v3/projects/97/issues",
        type: "GET",
        data: {
            private_token: "myToken",
            per_page: 100,
            page: pageNr
        },
        success: function (issuesList) {
            console.log("Page number: " + pageNr);

            megaList = [pageNr];

            if (issuesList.length < 100) {
                return megaList;
            }

            pageNr = pageNr +1 ;
            var received = func1(pageNr);
            megaList = $.merge(megaList, received);

            return megaList;
        }
    });
  }

var func2 = function () { 
    return 20;
}

var finishedFunc = function (resp1, resp2) {
    console.log("Responses were resp1: " + resp1 + " and resp2: " + resp2);
}

And I always get something like: "Responses were resp1: undefined and resp2: 20"

And I am expecting something like: "Responses were resp1: [1, 2, 3, 4, 5, ..., 27] and resp2: 20"

As stated before, I can't find any solutions that resolve my problem here in the forums, but if I might have overlooked something, please point me in the right way.

Answer 1

While reading the documentation.I came across this. Pagination

When listing resources you can pass the following parameters:

page (default: 1) - page number
per_page (default: 20, max: 100) - number of items to list per page

Link headers are send back with each response. These have rel prev/next/first/last and contain the relevant URL. Please use these instead of generating your own URLs.

It automatically says that the Response that came back will contain rel prev/next/first/last. So you can easily check that link headers contain next rel or not and If it contain then directly call that url for more issues and If not that means it does not contain more issues.

Answer 2

Once you start to think in async terms the solution become pretty simple:

var megaList = [];
function loadList(page) {
    page = Math.max(1, page);
    $.ajax({
        url: "https://mygitlabURL/api/v3/projects/97/issues",
        type: "GET",
        data: {
            private_token: "myToken",
            per_page: 100,
            page: page
        },
        success: function (issuesList) {
            console.log("Page number: " + page);
            megaList = megaList.concat(issuesList);
            if (issuesList.length >= 100) loadList(page+1);
        }
    });
}
loadList();