How to load json response page by page using ion infinite scroll

ionic-v1
1

Hi

I am using http.jsonp request to call json data which returns 500 objects. it takes time to load .So i am calling this response page by page.Reach page has 10 objects.First page is loading faster.How to load these data using ion inifinte scroll.I couldnt append the remaining page results. below is my code.

services.js

getloadpage: function(id) {

$http.jsonp(this.endpoint + ‘/getmydata/?page=’+id+’&callback=JSON_CALLBACK’,{cache:true}).success(function(postdata){
                                                                                              
                                                cacheEngine.put(‘loadpage’, postdata);
                                                deferred.resolve(postdata);

});
                                                 
return deferred.promise;
}

Controller.js

.controller(‘TestCtrl’, function($scope,$location,$ionicLoading, MYDATA) {
      
     $scope.allpostdata = [];
     $scope.pageno = 1;
     
     MYDATA.getloadpage($scope.pageno).then(function (data) {

$scope.data = data;
                                                        
                                                         
                                                        
                                                     console.log($scope.data);

});

$scope.loadmore = function (){

Blog.getloadpage(2).then(function (data){
                                                                  
                                                              $scope.data = data
                                                              $scope.$broadcast(‘scroll.infiniteScrollComplete’);

console.log($scope.data);
                                                         });

}

$scope.loadmore();
        
      
})

HTML

                                                                                                             

{{post.title}}

                      

View Details
                      


                         
             
 


Can Somebody please please help me.I am stuck on this.

Thanks in advance

Ash

2

No need to call $scope.loadmore(), it will call automatically by ion-infinite-scroll, also you must return number of total page/record in your service.
HTML

...
<ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()"></ion-infinite-scroll>
...

JS

.controller('TestCtrl', function($scope, MYDATA) {
     
     $scope.items = [];
     $scope.currentPage = 1;
     $scope.totalRecord = 0;
     $scope.noMoreItemsAvailable = false;

     
     $scope.loadMore = function (){
          MYDATA.getloadpage($scope.currentPage).then(function (result){
               $scope.totalRecord = result.totalRecord;               
               $scope.items = $scope.items.concat(result.items);
               
               if ($scope.items.length == $scope.totalRecord) 
	            $scope.noMoreItemsAvailable = true;
               else
		    $scope.currentPage += 1;
					
               $scope.$broadcast('scroll.infiniteScrollComplete');
     };

});
1 Like
3

HI Adyra

Thank you so much for your help.it worked exactly like i was looking for.Is it possible to put this results into cache using $cachefactory because everytime i come back from detail itempage it starts loading from begining.I tried the below code.but didnt work out.Can you please give any suggestions.

.controller(‘TestCtrl’, function($scope, MYDATA,$cacheFactory) {

$scope.items = [];
     $scope.currentPage = 1;
     $scope.totalRecord = 0;
     $scope.noMoreItemsAvailable = false;

var cacheposts = $cacheFactory(“mypostdata”);

$scope.loadMore = function (){

var cache = cacheposts.get(‘items’)
                                     if (cache)
                                     {

$scope.items =cache;

}

MYDATA.getloadpage($scope.currentPage).then(function (result){
                                     $scope.totalRecord = result.totalRecord;               
                                     $scope.items = $scope.items.concat(result.items);
                                     cacheposts.put(‘items’, $scope.items);
                                     if ($scope.items.length == $scope.totalRecord)
                                        $scope.noMoreItemsAvailable = true;
                                     else
                                       $scope.currentPage += 1;

$scope.$broadcast(‘scroll.infiniteScrollComplete’);
                                 };

});

4

Hi I have this on my resource:

return {
GetPost: function(){
return $http.get(BASE_URL+‘?filter[posts_per_page]=1&page=1’).then(function(response){
items = response.data;
return items;
});
}

How do I change the page=X from my controller load more? so the page number will be update by controller.

Thanks.