Use AngularJS $http.get to repeatedly request JSON array on scrolling

Question

Below is a snippet using AngularJS to get the JSON response.

On scrolling to the bottom of the page, I need to request repeatedly till the JSON array list is empty.

<section>
        <div style="padding-top:60px" infinite-scroll="myPagingFunction()" infinite-scroll-distance="3" ng-app="myApp" ng-controller="myCtrl"> 
            <div ng-repeat="news in newsList">

                <div class="col-lg-3 col-md-4 col-sm-6" style="">
                    <div class="thumbnail">
                        <img src="{{news.coverUrl}}" class="img-responsive"  alt="{{news.name}}"/>
                        <div class="caption">
                            <h4>{{news.name}}</h4>
                        </div>
                    </div>
                </div>
                <div class="visible-lg clearfix" ng-if="($index+1)%4 == 0"></div>
                <div class="visible-md clearfix" ng-if="($index+1)%3 == 0"></div>
                <div class="visible-sm clearfix" ng-if="($index+1)%2 == 0"></div>

            </div>
        </div>
    </section>
    <script src="js/jquery.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="js/ng-infinite-scroll.min.js"></script>


    <script>
        var offset = 0 
        var maxCount = 20
        var app = angular.module('myApp', ['infinite-scroll']);
        function myPagingFunction(){

            app.controller('myCtrl', function($scope, $http) {
                $http.get("news.json").then(function(response) {
                  $scope.newsList = response.data; 
                });
            });
        }
        myPagingFunction();
    </script>

    <script src="js/bootstrap.min.js"></script>

Kindly help me in solving this.

Using jquery with angular is a big no.Though in theory it can be done by writing jquery code in apply method,jquery shouldnt be used.Use only javascript.Otherwise , javascript DOM manipulation will not be caught by angular. — WebInsight
– WebInsight, Commented Apr 16, 2016 at 9:24
Anyway below answer is one of the best way to implement the functionality — WebInsight
– WebInsight, Commented Apr 16, 2016 at 9:25

Medet Tleukabiluly · Accepted Answer · 2016-04-16 09:21:41Z

1

Using jQuery + angular is not good
You must use angular way instead, and write some directives or listeners in run phase, but here's a better approach - use `ngInfiniteScroll plugin

answered Apr 16, 2016 at 9:21

Medet Tleukabiluly

12k3 gold badges38 silver badges78 bronze badges

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

1 Comment

Amarnath R Over a year ago

I have use nginfinitescroll, but didn't work. Can you please alter my code to make it functional

XAVIER K.I · Accepted Answer · 2016-04-16 09:27:19Z

0

You can simply use infinite Scroll services to easily achieve this ,

    <ANY infinite-scroll='{expression}'
 [infinite-scroll-distance='{number}']
 [infinite-scroll-disabled='{boolean}']
 [infinite-scroll-immediate-check='{boolean}']
 [infinite-scroll-listen-for-event='{string}']>

Add ng-infinite scroll module in your application for more info refer this [Documentation]:(https://sroze.github.io/ngInfiniteScroll)

answered Apr 16, 2016 at 9:27

XAVIER K.I

3492 silver badges9 bronze badges

4 Comments

XAVIER K.I Over a year ago

in your html page add <div infinite-scroll="myPagingFunction()" infinite-scroll-distance="3"></div> and define your myPagingFunction() inside Controller ..

XAVIER K.I Over a year ago

app.controller('myCtrl', function($scope, $http) {                 $scope.myPagingFunction = function(){                 $http.get("news.json").then(function(response) {                   $scope.newsList = response.data;                  });              }             });

change your code like this , and check it works , if you need further help , create a plunkr

Amarnath R Over a year ago

how to append new data inside $scope.newsList

XAVIER K.I Over a year ago

use array push method, ie $scope.newsList.push(response); or use concatenate

Mehran Hafizi · Accepted Answer · 2016-04-16 10:38:31Z

You can use this simple directive and enjoy:

app.directive("scroll",['$window', function ($window) {
return function (scope, element, attrs) {
    angular.element($window).bind("scroll", function () {

        if (document.body.scrollHeight - $window.scrollY < 890) {
            scope.$apply(function () {

                scope.myPagingFunction();
            });
        }

    });
};
 }]);

and you can use this code for your situation

    <section>
        <div style="padding-top:60px" scroll ng-app="myApp" ng-controller="myCtrl"> 
            <div ng-repeat="news in newsList">

                <div class="col-lg-3 col-md-4 col-sm-6" style="">
                    <div class="thumbnail">
                        <img src="{{news.coverUrl}}" class="img-responsive"  alt="{{news.name}}"/>
                        <div class="caption">
                            <h4>{{news.name}}</h4>
                        </div>
                    </div>
                </div>
                <div class="visible-lg clearfix" ng-if="($index+1)%4 == 0"></div>
                <div class="visible-md clearfix" ng-if="($index+1)%3 == 0"></div>
                <div class="visible-sm clearfix" ng-if="($index+1)%2 == 0"></div>

            </div>
        </div>
    </section>
    <script src="js/jquery.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="js/ng-infinite-scroll.min.js"></script>


    <script>
        var offset = 0 
        var maxCount = 20
        var app = angular.module('myApp', ['infinite-scroll']);
         app.controller('myCtrl', function ($scope, $http) {
    $scope.myPagingFunction= function() {
        $http.get("news.json").then(function (response) {
            $scope.newsList = response.data;
        });
    }
             });
    app.directive("scroll",['$window', function ($window) {
  return function (scope, element, attrs) {
angular.element($window).bind("scroll", function () {

    if (document.body.scrollHeight - $window.scrollY < 890) {
        scope.$apply(function () {

            scope.myPagingFunction();
            });
        }

    });
};
}]);
    </script>

    <script src="js/bootstrap.min.js"></script>

Collectives™ on Stack Overflow

Use AngularJS $http.get to repeatedly request JSON array on scrolling

3 Answers 3

1 Comment

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related