CODEWITHSUNDEEP
javascriptjqueryangularjsinfinite-scroll
Ivailo Stoianov
Ivailo Stoianov

Reputation: 33

angularjs infinte scroll displaying data

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;
        });
      };
    }]);

Upvotes: 1

Views: 2178

Answers (2)

barkat
barkat

Reputation: 11

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.

Upvotes: -1

jsduniya
jsduniya

Reputation: 2474

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;
        });
      };
    }]);

Upvotes: 2

Related Questions