how to do Asynchronous loading--javascript/Angular..

chand pb
chand pb used Ask the Experts™
on
Hello,
  Not sure how to do this...need some advise/ snippet/links ..

Have  a list of names on the server..I created  a Page that has a button "load more"...

When the user access the page . I would like following

1: call the APi to bring back 40 record ( have this logic)
2: Only display 20 records on the UI
3: When the user press the button "load more". I would like to
   A: Load the next 20 record (that was retrieve above) and render it in UI
   b: Make an Async call to get the next 20 record and keep it in memory

4: #3 continue as long as their are records or user stop pressing the "load more" button,,



Thanks for your help..
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
View Solution Only
chand pb

Author

Commented:
here is an example I saw that has the load more concept --http://jsfiddle.net/api/post/library/pure/

but it does not pre-load the next batch of data....
Alexandre SimõesManager / Solutions Architect

Commented:
(your link points to an empty jsfiddle)

This is more of less the same as the infinite scroll technique, where the user can scroll down a list and when is almost reaching the end, a new batch of records gets added to the list.

In your case you should have a (angularjs) factory that isolates this logic.
In this factory you should keep the list in memory, that will start with the initial 40 items and the next will be added to it.
In this same factory you must have a method called getNextPage that implements the paging logic you described.
The main idea is:
    - if the items list is empty, get the double of the page size starting from the beginning
        > get the first [pagesize] elements in the list
        > track the index of the last item retrieved (it might have been less than 20)
        > if you got less than [pagesize] is because your in the last page. You can use this information to avoid useless calls to the server and potentially disable the "Get More" button.
    - if the items list have elements, pick [pagesize] elements
       > if you gor [pagesize] elements, do the ajax call to get [pagesize] more
       ... behave like above, tracking the last item index


If you know how to do this without the pre-fetching logic, adding it is quite easy.
Manager / Solutions Architect
Commented:
I didn't test this but should be something around these lines: 
app.controller("PaginationCtrl", function ($scope, Item) {

    $scope.itemsPerPage = 5;
    $scope.currentPage = 0;
    $scope.total = Item.total();
    $scope.pagedItems = fetchData(0);

    $scope.loadMore = function () {
        $scope.currentPage++;
        fetchData($scope.currentPage * $scope.itemsPerPage);
    };

    $scope.nextPageDisabledClass = function () {
        return $scope.currentPage === $scope.pageCount() - 1 ? "disabled" : "";
    };

    $scope.pageCount = function () {
        return Math.ceil($scope.total / $scope.itemsPerPage);
    };

    var nextPage = null;
    var fetchData = function(recordIndex){
        if($scope.itemsPerPage === 0){
            var items = Item.get(recordIndex, $scope.itemsPerPage * 2);
            nextPage = items.slice($scope.itemsPerPage, $scope.itemsPerPage*2);
            $scope.pagedItems.concat(items.slice(0, $scope.itemsPerPage-1));
        } else {
            $scope.pagedItems.concat(nextPage);
            nextPage = Item.get(recordIndex, $scope.itemsPerPage);
        }
    };
    
});

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial