Promise approach in Angular

Question

I have attempted to create a lazy loading solution for my posts, see below:

$scope.loadMore = function() {

  if(hasRunBefore===0){
      page+=1;
  }

  if($scope.postsCount > $scope.posts.length){
      $http.get('/api/posts', {params: { page: page, pageSize: 10 }})
      .then(function(res){
          var morePosts = res.data.posts;
          if(morePosts && morePosts.length > 0){
              loadData(morePosts);
              page+=1;
              hasRunBefore+=1;
          }
      });
      }
  };

};

  var loadData = function(posts){
      $scope.posts = $scope.posts.concat(posts);
  };

Some notes:

$scope.postsCount is grabbed by getting the length of the whole table in Mongo, say this is 50 in this case
$scope.loadMore is called whenever you reach the end of a page on the frontend (infinite-scroll is anyone's interested)
$scope.loadMore can be called multiple times as it is triggered when you reach the end of a page

The problem is - loadData() is the function that appends to the $scope.posts, so the if($scope.postsCount > $scope.posts.length) is always true

Question - I am new to the promise approach in Angular 1.6.x, i.e.: .then. How will I need to restructure this so that I wait for the loadData() to finish executing so that the if($scope.postsCount > $scope.posts.length) can be accurate?

Did not read through all your post, but I can see you are missing a callback function where $scope.posts.length could be evaluated. — RaphaMex
– RaphaMex, Commented Jun 13, 2017 at 16:26

aseferov · Accepted Answer · 2017-06-13 16:31:34Z

1

create loading property and set it as true during request. if load more function is called again check loading property

$scope.loading = false
$scope.loadMore = function() {

  if($scope.loading) return  // if page still loading dont allow
  $scope.loading = true


  if(hasRunBefore===0){
      page+=1;
  }


  if($scope.postsCount > $scope.posts.length){
      $http.get('/api/posts', {params: { page: page, pageSize: 10 }})
      .then(function(res){
          $scope.loading = false; // set loading as false after finish request
      });
      }
  };

};

answered Jun 13, 2017 at 16:31

aseferov

6,4233 gold badges20 silver badges24 bronze badges

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

1 Comment

Sean Over a year ago

Awesome answer. Simple yet beautiful. Thanks man. Wanna bang my head against the wall for not figuring it out :)

Collectives™ on Stack Overflow

Promise approach in Angular

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related