JSON Response with infinite scroll

Question

I have troubles with infinite scroll function. Every time when I scroll down loadMore function called twice and every time load 2 page instead of 1 page. In log I see loading 2 and 3 page:

loadMore 2
loadMore 3

Then load 4 and 5 page:

loadMore 4
loadMore 5

This my controller:

.controller('PostsCtrl', function( $scope, $http, DataLoader, $timeout, $ionicSlideBoxDelegate, $rootScope, $log ) {

  var postsApi = $rootScope.url + 'posts';

  $scope.moreItems = false;

  $scope.loadPosts = function() {

    // Get all of our posts
    DataLoader.get( postsApi ).then(function(response) {

      $scope.posts = response.data;

      $scope.moreItems = true;

      $log.log(postsApi, response.data);

    }, function(response) {
      $log.log(postsApi, response.data);
    });

  }

  // Load posts on page load
  $scope.loadPosts();

  paged = 2;

  // Load more (infinite scroll)
  $scope.loadMore = function() {

    if( !$scope.moreItems ) {
      return;
    }

    var pg = paged++;

    $log.log('loadMore ' + pg );

    $timeout(function() {

      DataLoader.get( postsApi + '?page=' + pg ).then(function(response) {

        angular.forEach( response.data, function( value, key ) {
          $scope.posts.push(value);
        });

        if( response.data.length <= 0 ) {
          $scope.moreItems = false;
        }
      }, function(response) {
        $scope.moreItems = false;
        $log.error(response);
      });

      $scope.$broadcast('scroll.infiniteScrollComplete');
      $scope.$broadcast('scroll.resize');

    }, 1000);

  }

  $scope.moreDataExists = function() {
    return $scope.moreItems;
  }

  // Pull to refresh
  $scope.doRefresh = function() {

    $timeout( function() {

      $scope.loadPosts();

      //Stop the ion-refresher from spinning
      $scope.$broadcast('scroll.refreshComplete');

    }, 1000);

  };

})

How call loadMore one time? This my template:

<ion-view view-title="Posts">
  <ion-content>
  <ion-refresher on-refresh="doRefresh()"></ion-refresher>
    <ion-list>
        <ion-item class="item-icon-right" ng-repeat="post in posts track by $index" href="#/app/posts/{{post.id}}" track>
            <!-- <img ng-if="post.featured_image" ng-src="{{post._embedded['http://v2.wp-api.org/attachment'][0][$index].source_url}}" class="alignleft" /> -->
            <h2 ng-bind-html="post.title.rendered"></h2>
            <p ng-if="post.excerpt.rendered" ng-bind-html="post.excerpt.rendered"></p>
            <i class="icon ion-chevron-right icon-accessory"></i>
        </ion-item>
    </ion-list>

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

  </ion-content>
</ion-view>

Italo Ayres · Accepted Answer · 2016-07-06 11:17:21Z

2

You should broadcast the infiniteScrollComplete event inside the callback of DataLoader.get

What's happenning is the Get method is assincronous, so your data is being added to the list after the event is fired.

Try changing your code to this, and it should work.

DataLoader.get( postsApi + '?page=' + pg ).then(function(response) {

    angular.forEach( response.data, function( value, key ) {
      $scope.posts.push(value);
    });

    if( response.data.length <= 0 ) {
      $scope.moreItems = false;
    }

    // Place here
    $scope.$broadcast('scroll.infiniteScrollComplete');

  }, function(response) {
    $scope.moreItems = false;
    $log.error(response);
  });

answered Jul 6, 2016 at 11:17

Italo Ayres

2,6732 gold badges19 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Srijith · Accepted Answer · 2016-07-06 11:15:59Z

0

I had faced this issue as well. Here are some tips I used to solve it

Remove the ion-refresher and see if it calls only once
If yes, then remove the distance and immediate-check from the infinite scroll
In your controller, remove the timeouts when calling the api
And broadcast these two events in your success callback
- $scope.$broadcast('scroll.infiniteScrollComplete');
- $scope.$broadcast('scroll.resize');

answered Jul 6, 2016 at 11:15

Srijith

1,4449 silver badges14 bronze badges

Collectives™ on Stack Overflow

JSON Response with infinite scroll

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related