angularjs infinte scroll displaying data

Question

I am having some problems with infinite scroll in AngularJS while retrieving from json API. I understand that instead of rewriting the variable I must push it in array which I tried, but then my results dissapear. The other thing is that the scroll function will be called so much times that the functionality will be broken as it won't be able to record the number var or it will be incremented too much times and I will miss data.

Here is what I have: index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>API</title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
  <script src="script.js"></script>
    <script src="ng-infinite-scroll.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

</head>
<body ng-app="httpExample">
  <div ng-controller="FetchController as ctrl">
  <select ng-model="method">
    <option>GET</option>
    <option>JSONP</option>
  </select>
  <input type="text" ng-model="url" size="80"/>
  <button id="fetchbtn" ng-click="fetch()">fetch</button><br>
  <pre>http status code: {{status}}</pre>


  <div class="row">
  <div class="col-sm-6 col-md-4" infinite-scroll="fetch()" infinite-scroll-distance="1" ng-repeat="MovieID in data">
    <div class="thumbnail">
      <img src="{{MovieID.CoverImage}}" alt="...">
      <div class="caption">
        <h3>{{MovieID.MovieTitleClean}}</h3>
      </div>
    </div>
  </div>

</div>

</div>
</body>
</html>

and script.js

angular.module('httpExample', ['infinite-scroll'])
  .controller('FetchController', ['$scope', '$http', '$templateCache',
    function ($scope, $http, $templateCache) {
      $scope.method = 'GET';
      $scope.url = 'https://yts.re/api/list.json?limit=20&quality=720p&rating=5&sort=seeds&set=1';
      number=1;
      $scope.fetch = function() {
        $scope.code = null;
        $scope.response = null;


$scope.url = 'https://yts.re/api/list.json?limit=30&quality=720p&rating=5&sort=seeds&set=' + number;
        $http({method: $scope.method, url: $scope.url, cache: $templateCache}).
          success(function(data, status) {
            $scope.status = status;
            $scope.data = data.MovieList;
            number++;
            console.log(number);
          }).
          error(function(data, status) {
            $scope.data = data || "Request failed";
            $scope.status = status;
        });
      };
    }]);

I think you just repeating on wrong place.Try adding ng-repeat withing ur scoller div — jsduniya
– jsduniya, Commented Aug 3, 2014 at 12:35

jsduniya · Accepted Answer · 2014-08-03 13:07:44Z

2

I just tried this hope this will help.

Like VIEW:

<div class="row">
  <div class="col-sm-6 col-md-4" infinite-scroll="fetch()" infinite-scroll-distance="1" >
    <div class="thumbnail" ng-repeat="MovieID in data">
      <img src="{{MovieID.CoverImage}}" alt="...">
      <div class="caption">
        <h3>{{MovieID.MovieTitleClean}}</h3>
      </div>

      <div style='clear: both;'></div>
    </div>
  </div>

Script.js

angular.module('httpExample', ['infinite-scroll'])
  .controller('FetchController', ['$scope', '$http', '$templateCache',
    function ($scope, $http, $templateCache) {
      $scope.method = 'GET';
      $scope.url = 'https://yts.re/api/list.json?limit=20&quality=720p&rating=5&sort=seeds&set=1';
      number=1;
      $scope.data=[];
      $scope.it=[];
      $scope.fetch = function() {
        $scope.code = null;
        $scope.response = null;


       $scope.url = 'https://yts.re/api/list.json?limit=30&quality=720p&rating=5&sort=seeds&set=' +     number;


        $http({method: $scope.method, url: $scope.url}).
          success(function(data, status) {
            $scope.status = status;
             var items = data.MovieList;
             for (var i = 0; i < items.length; i++) {
               $scope.data.push(items[i]);
           }

            console.log($scope.data);
            number= number+1;
          }).
          error(function(data, status) {
            $scope.data = data || "Request failed";
            $scope.status = status;
        });
      };
    }]);

answered Aug 3, 2014 at 13:07

jsduniya

2,4727 gold badges33 silver badges47 bronze badges

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

1 Comment

Ivailo Stoianov Over a year ago

Yes, I was experimenting with a similar code. The only problem is that when scrolling this happens: prntscr.com/494602 So I end up with movies repeated while others now showed. And I just did it. Thanks bro! :)

barkat · Accepted Answer · 2016-07-01 11:27:27Z

Please refer blog http://bluepiit.com/blog/angularjs-infinite-scroll-pagination/ it has explained in details about implementing infinite scroll pagination. and Yes you need to push result into an array so that it can rendered.

When you are scroll event invoked, you need to mark a flag to prevent repeating requests, e.g.-

scope.loadMoreCourses = function () {
if (scope.loadingResult) {
return;
}

and once your result is retrieved, then you can switch off this flag and by this time result will be rendered and you will not get more scroll bottom events:

scope.pagination.currentPage = scope.pagination.currentPage + 1;
scope.offset = (scope.pagination.currentPage - 1) * scope.pagination.pageSize;
scope.limit = scope.pagination.pageSize;
scope.resultList = CourseService.courses.list({offset:scope.offset, limit:scope.limit});
scope.loadingResult = false;

For details, please refer mentioned blog.

Collectives™ on Stack Overflow

angularjs infinte scroll displaying data

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related