Ionic infinite scroll

June 5, 20234 Views

I am using wordpress as a backend for an app and I want to use infinite scroll but I am having trouble concatenating articles.

I am calling the service using a factory:

.factory('Worlds', function ($http) {
    var worlds = [];

    storageKey = "worlds";

    function _getCache() {
        var cache = localStorage.getItem(storageKey );
        if (cache)
            worlds = angular.fromJson(cache);
    }
    return {
        all: function () {
            return $http.get("http://www.examplesite.com/tna_wp/wp-json/posts?filter[category_name]=international&filter[posts_per_page]=10").then(function (response) {
                worlds = response.data;
                console.log(response.data);
                return worlds;
            });
        },

        GetNewPosts: function () {
            return $http.get("http://www.examplesite.com/tna_wp/wp-json/posts?filter[category_name]=international&filter[posts_per_page]=2").then(function (response) {
                worlds = response.data;
                console.log(response.data);
                return worlds;
            });
        },
        get: function (worldId) {
            if (!worlds.length) 
                _getCache();
            for (var i = 0; i < worlds.length; i++) {
                if (parseInt(worlds[i].ID) === parseInt(worldId)) {
                    return worlds[i];
                }
            }
            return null;
        }
    }
    })

and my controller looks like this:

.controller('WorldCtrl', function ($scope, $stateParams, $timeout, _, Worlds) {
    $scope.worlds = [];
    Worlds.all().then(function (data){
      $scope.worlds = data;
      window.localStorage.setItem("worlds", JSON.stringify(data));
    }, 

    function (err) {
      if(window.localStorage.getItem("worlds") !== undefined) {
        $scope.worlds = JSON.parse(window.localStorage.getItem("worlds"));
      }
    }
  );

  $scope.loadMore = function() {

    Worlds.GetNewPosts().then(function (worlds){
        var loadedIdss = _.pluck($scope.worlds, 'id');
        var newItemss = _.reject(worlds, function (item){ 
           return _.contains(loadedIdss, item.id); 
      });
      $scope.worlds = newItemss.concat($scope.worlds);
      $scope.$broadcast('scroll.infiniteScrollComplete');
      });
    };

})

I am trying to use underscore to ignore the posts that are already loaded, however when i try the infinite scroll it just goes into a loop calling more posts but doesnt add them to my ng-repeat and ionicLoading renders the app useless.

Post Views: 4

2 comments

ion-infinite-scroll works with some sort of paginated result and you seem to feed your list with all the results.

Your API should look something like this:

http://www.examplesite.com/tna_wp/wp-json/posts?filter[category_name]=international&filter[posts_per_page]=2&filter[page]=1

notice I’ve added a page filter.

and your service responsible to fetch the data should look something like this:

.factory('dataService', function($http) {
   return {
      GetPosts: function(page, pageSize) {
        return $http.get("http://mywebservice/api/test/posts/" + page + "/" + pageSize);
      }
   };
});

Your controller

.controller('mainController', function($scope, dataService) {

    $scope.posts = [];
    $scope.theEnd = false;

    var page = 0;
    var pageSize = 10;

    $scope.$on('$stateChangeSuccess', function() {
        $scope.loadMore();
      });

    $scope.loadMore = function(argument) {
        page++;
        dataService.GetPosts(page, pageSize)
          .then(function(result) {
            console.log('items fetched: ' + result.data.length);
            if (result.data.length > 0) {
                angular.forEach(result.data, function(value, key) {
                  $scope.posts.push(value);
                });
            }
            else {
                $scope.theEnd = true;
            }
        })
        .finally(function() {
            $scope.$broadcast("scroll.infiniteScrollComplete");
        });
    };

})

would initialize an array of objetct – as you’re doing – and a boolean which tells the directive ion-infinite-scroll when you’ve reached the end:

$scope.posts = [];
$scope.theEnd = false;

Then you can have some variables to control the pagination:

var page = 0;
var pageSize = 10;

I start loading when the view is loaded:

$scope.$on('$stateChangeSuccess', function() {
    $scope.loadMore();
});

$scope.loadMore then would increment the page number:

page++;

and call the service layer:

dataService.GetPosts(page, pageSize)

when I’ve reached the end of the stream I would set the variable:

$scope.theEnd = true;

to let the directive know we don’t have other items to append.

.finally(function() {
    $scope.$broadcast("scroll.infiniteScrollComplete");
});

finally is always called when the promise is resolved.

Instead of ng-repeat you can use collection-repeat which should be much faster.

You can play with it here.

Try this create a function infiniteScrollCompleteCancelLoadMore and call it when you want to complete the scroll and you have reached the end of your list.

function infiniteScrollCompleteCancelLoadMore() {
        $timeout(function () {
            $timeout(function () {
                $scope.$broadcast('scroll.infiniteScrollComplete');
                $rootScope.canLoad = false;
            });
        });
    }


$scope.loadMore = function() {
   Worlds.GetNewPosts().then(function (worlds){
      var loadedIdss = _.pluck($scope.worlds, 'id');
      var newItemss = _.reject(worlds, function (item){ 
         return _.contains(loadedIdss, item.id); 
   });
  $scope.worlds = newItemss.concat($scope.worlds);
  infiniteScrollCompleteCancelLoadMore() // CHANGE HERE  
  });
};

and your HTML

<ion-infinite-scroll on-infinite="loadMore()" ng-if="canLoad" distance="1%"
                         immediate-check="false"></ion-infinite-scroll>

OR call This is you just want to cancel loadMore loop.

function infiniteScrollComplete() {
        $timeout(function () {
            $timeout(function () {
                $scope.$broadcast('scroll.infiniteScrollComplete');
            });
        });
    }

Comments are closed.

Related posts

2 comments

Social Network