Unbounded scrolling with Ionic

Question

Unbounded scrolling with Ionic

Currently, I am integrating Wordpress as the backend for my app and facing challenges in implementing infinite scroll due to issues with concatenating articles.

To fetch the data, I have created a 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;
        }
    }
    })

Additionally, here is how my controller is structured:

.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');
      });
    };

})

My aim is to utilize underscore to filter out already loaded posts, however, the infinite scroll seems to be stuck in a loop fetching more posts without displaying them in my ng-repeat, and the ionicLoading feature is making the app unresponsive.

javascript angularjs wordpress ionic-framework underscore.js

Answer 1

Answer №1

ion-infinite-scroll is designed to work with paginated results, but it appears that you are feeding your list with all the results at once.

Here is an example of how your API should be structured:

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

Notice the addition of the page filter.

Your data service responsible for fetching 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 should initialize an array of objects and a boolean flag to indicate when you've reached the end:

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

You can also have variables to manage pagination:

var page = 0;
var pageSize = 10;

Load items when the view is loaded:

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

The $scope.loadMore function increments the page number:

page++;

and calls the data service:

dataService.GetPosts(page, pageSize)

When you reach the end of the data stream, set the end flag:

$scope.theEnd = true;

to inform the directive that no more items can be appended.

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

The finally block is executed when the promise is resolved.

Instead of using ng-repeat, consider using collection-repeat for improved performance.

You can test this functionality here.

Answer 2

ion-infinite-scroll is designed to work with paginated results, but it appears that you are feeding your list with all the results at once.

Here is an example of how your API should be structured:

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

Notice the addition of the page filter.

Your data service responsible for fetching 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 should initialize an array of objects and a boolean flag to indicate when you've reached the end:

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

You can also have variables to manage pagination:

var page = 0;
var pageSize = 10;

Load items when the view is loaded:

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

The $scope.loadMore function increments the page number:

page++;

and calls the data service:

dataService.GetPosts(page, pageSize)

When you reach the end of the data stream, set the end flag:

$scope.theEnd = true;

to inform the directive that no more items can be appended.

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

The finally block is executed when the promise is resolved.

Instead of using ng-repeat, consider using collection-repeat for improved performance.

You can test this functionality here.

Answer 3

Answer №2

Here's a suggestion: create a function called

infiniteScrollCompleteCancelLoadMore

and use it when you reach the end of your list to stop the scrolling.

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() // MAKE A CHANGE HERE  
  });
};

Include this snippet in your HTML

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

OR You can also use this function if you just need to cancel the loadMore loop.

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

Answer 4

Here's a suggestion: create a function called

infiniteScrollCompleteCancelLoadMore

and use it when you reach the end of your list to stop the scrolling.

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() // MAKE A CHANGE HERE  
  });
};

Include this snippet in your HTML

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

OR You can also use this function if you just need to cancel the loadMore loop.

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

Unbounded scrolling with Ionic

Answer №1

Answer №2

Similar questions

Using Ionic 4 with Angular to set the root of the application and control navigation with the back button

Customizing a WordPress theme by integrating content directly into the PHP script

Moving a function from the controller to the directive

How to pass a method from a child component to a parent component in Vue.js

Running `grunt serve` with CORS enabled allows for cross

Confirm Submission Issue in HTML Form

How to use the window.confirm method to print the HTML tag in an AJAX post

How can I modify a dynamically generated table to include rowspan and colspan attributes in the rows?

Showing options in the navigation bar upon user authentication with Passport in NodeJS

The application denied the request to establish an insecure header with the label "Host", communicating using Ionic framework

unable to render a vector layer in openlayers 6

Expand or reduce the displayed content based on the preset value in Angular

The PHP post method is unable to retrieve the value of a button tag

having difficulty choosing a particular identifier from a JSON string

Adding an arrow to a Material UI popover similar to a Tooltip

The filter for Woocommerce, when added through the add_filter(‘woocommerce_product_get_price’) function, does not take effect when triggered by an ajax call

Getting your JQuery ready() statement right is crucial for the proper

Top approach for inserting Class instance into a group

Encountered a glitch while trying to install React JS using npx create-react-app xyz

Encountered an issue with locating the module 'webpack-cli/bin/config-yargs' while attempting to run webpack-dev