Search This Blog

Thursday, May 10, 2018

AngularJs- SharePoint API to retrieve more than 5000 items


The solution is to use Recursive call to retrieve more than 5000 items

<div id="prod" style="font-size: small !important" ng-controller="productController" ng-init="init()">
table id="prodTable" class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>Title</th>
                       
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="item in prodItems">
                        <td>{{item.Title}}</td>                       
                    </tr>
                </tbody>

            </table>
</div>
Controller
"use strict";
(function () {
    angular.module("testApp")
        .controller("productController", ["$scope", "ProdService", "$location", "$http",
            function ($scope, ProdService, $location, $http) {


                $scope.init = function () {
                    //get all items from staffdirectory                     
                    prodService.getAll()
                        .then(function (response) {
                            $scope.prodItems = response.data.d.results;

});
                }

}]);

Services

"use strict";
(function () {
    angular.module("testApp")
        .factory("prodService", ["baseSvc", function (baseService) {
            var listEndPoint = '/_api/web/lists';
            var getAll = function () {
                var baseSiteUrl = _spPageContextInfo.siteAbsoluteUrl;
                var query = baseSiteUrl+listEndPoint + "/GetByTitle('ProductList')/Items";
                return baseService.getRequestAll(query);
            }; 
return {
                getAll: getAll,               
             
            };
        }]);
})();

baseSvc

"use strict";
(function () {
    angular.module("testApp")
        .factory("baseSvc", ["$http", "$q", function ($http, $q) {
// The first time through, these three variables won't exist, so we create them. On subsequent calls, the variables will already exist.
            var deferred = deferred || $q.defer();
            var results = results || [];         
            results.data = results.data || [];
            var getRequestAll = function (queryUrl) {              
                $http({
                    url: queryUrl,
                    method: "GET",
                    headers: {
                        "accept": "application/json;odata=verbose",
                        "content-Type": "application/json;odata=verbose"
                    }
                }).then(function (response) {
                    // The first time through, we don't have any data, so we create the data object with the results
                    if (!results.data.d) {
                        results.data = response.data;
                    } else {
                        // If we already have some results from a previous call, we concatenate this set onto the existing array
                        results.data.d.results = results.data.d.results.concat(response.data.d.results);
                    }
                    // If there's more data to fetch, there will be a URL in the __next object; if there isn't, the __next object will not be present
                    if (response.data.d.__next) {
                        // When we have a next page, we call this function again (recursively).
                        // We change the url to the value of __next and pass in the current results and the deferred object we created on the first pass through
                        queryUrl = response.data.d.__next;
                        getRequestAll(queryUrl);
                    } else {
                        // If there is no value for __next, we're all done because we have all the data already, so we resolve the promise with the results.
                        deferred.resolve(results);
                    }
                    }, function (result, status) {
                        deferred.reject(status);
                    });
                return deferred.promise;
            };
        }]);
})();


No comments:

Post a Comment