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

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..
chand pbAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

chand pbAuthor 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 / Technology SpecialistCommented:
(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.
chand pbAuthor Commented:
Alexandre SimõesManager / Technology SpecialistCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.