Loading of paginated data from API

Question

I am working on a system that currently requires me to load all items from an API.

The API is built with pagination feature in it. I keep calling the API a number of times and $http.get cursing the system not to respond. For example, once I load the page that needs to call the API many times (like 50 to 80 times depending on the number of pages), for a few minutes anything I do won't respond until the calling of the API is almost finished. I already tried a lot of ways but it won't work.

$scope.loadAllPagedItems = function (category_uuid, max_pageitem, item_perpage) {
    for (var a = 0 ; a < max_pageitem; a++) {
        itemResource.findItems(category_uuid, item_perpage, a).then(function (response) {
            if (response.data.data.length > 0) {
                for (var a = 2 ; a < $scope.categories.length; a++) {
                    if ($scope.categories[a][0].category_uuid == response.data.data[0].category_uuid) {
                        for (var j = 0; j < response.data.data.length; j++) {
                            $scope.categories[a][0].data.push(response.data.data[j]);
                        }
                    }
                }
            }
        }, function (error) {
            console.log(error);
        })
    }
}

Is there any way I can do this better?

Answer 1

Sequentially Retrieving Paginated Data from an Asynchronous API

$scope.loadAllPagedItems = function(category_uuid, max_pageitem, item_perpage) {
    var promise = $q.when([]);
    for (let a = 0 ; a < max_pageitem; a++) {
        promise = promise
          .then(function(dataArray) {
            var p = itemResource.findItems(category_uuid, item_perpage, a);
            p = p.then(function (response) {
                  return dataArray.concat(response.data.data);
            });
            return p;
        });
    };
    return promise;
};

The above example, executes XHRs sequentially and uses the array concat method to merge the resolved arrays into a single array.

Usage:

$scope.loadAllPagedItems(category, pages, itemsPerPages)
  .then(function(finalArray) {
    console.log(finalArray);
}).catch(function(response) {
    console.log("ERROR ",response.status);
    throw response;
});