AngularJS Ionicframework infinite scroll GET REQUEST a list 10 at a time

Question

I'm trying to implement an ion-infinite-scroll using the ionic framework, I have a REST API that allows me set the index to get request a range.. my Service looks like this, where begin in end are indexes.

this.GetUserRatings = function (id, begin, end) {
            return $http.get($rootScope.endPoint + '/user/' + id + '/ratings/'+ begin + '/' + end);
        };

When the page reloads initially i want 10 items in the list so in my controller it would go like this..

 UserService.GetUserRatings($stateParams.id, 1, 10)
        .success(function (data) {
          $scope.userRatings = angular.fromJson(data);
          }).error(function(error) {
                    //do something
        });

As I scroll down the list, I want my ion-infinite-scroll to get the next 10 items (11 - 20) and the next (21 - 30) and so on.. So how do i do that?

$scope.loadMore = function() {

   // UserService.GetUserRatings($stateParams.id, ?, ?)
   // $scope.ratings.push({...}); I'm guessing this will be in the success 
   //also how to know if no more results
    $scope.$broadcast('scroll.infiniteScrollComplete'); 
  };

  $scope.ratings = [];

In the view it goes like this..

 <ion-infinite-scroll ng-if="noMoreResults" on-infinite="loadMore()" distance="10%"></ion-infinite-scroll>

aorfevre · Accepted Answer · 2015-06-26 20:36:56Z

1

Basicly, you are updating $scope.userRatings, so I'd use something like that which consist of :

first getting next items
then adding those items to your list. Note that I suggest a merge method but without more info on your data structure, it is hard to suggest something appropriate.
I don't know how you can get noMoreResults to true, but you may know when to intantiate it ;)

.

 var _loopItems = 10;
 $scope.loadMore = function() {
   var _curLength = $scope.userRatings.length;

   UserService.GetUserRatings($stateParams.id, _curLength  , _curLength  + _loopItems ).success(function (data) {
      $scope.userRatings = angular.merge($scope.userRatings, angular.fromJson(data)); // AS I DON T KNOW YOUR DATAS, IT S HARD TO TELL HOW TO MERGE THOSE VALUES
      }).error(function(error) {
                //do something
    });

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

EDIT : As your response is like that :

[{id:1, userid:1, rating_num:5, rating_text:"foo"},{id:2, userid:2, rating_num:5, rating_text:"foo"}]

I suggest changing the merge with the follwoing :

data = angular.fromJson(data);
for (var i =0; i< data.length; i++){
  $scope.userRatings.push(data[i]);
}

edited Jun 26, 2015 at 20:36

answered Jun 26, 2015 at 20:09

aorfevre

5,0744 gold badges23 silver badges54 bronze badges

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

4 Comments

teddybear123 Over a year ago

does angular merge work like push?.. like does it add the new objects to the end of the array userRatings array.. i get your logic, my initial index are wrong should be 0 - 9... i was kinda thinking of the same thing (userRatings.length, userRatings.length + 10).. but i was thinking of $scope.userRatings.push for the response data.. how is the push different from the merge

aorfevre Over a year ago

I don't know your response structure. I personnaly loop through my response and do "array.push" but without info on your response structure, it's hard to tell you what to do.

teddybear123 Over a year ago

[{id:1, userid:1, rating_num:5, rating_text:"foo"'},{id:2, userid:2, rating_num:5, rating_text:"foo"'}]

aorfevre Over a year ago

if your service does not provide info on "total number", you can base your assumption on the response 204 (empty) from your service.

Collectives™ on Stack Overflow

AngularJS Ionicframework infinite scroll GET REQUEST a list 10 at a time

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related