AngularJS service function not returning full promise after while loop has completed

Question

I'm trying to paginate a map. I want to force the controller to wait for the service which performs the pagination to return all the available products before trying to do anything.

I've implemented a resolve function in my router which will call the service that performs the pagination (using a while loop) and fetches the results.

When running the code, inside the controller the number of "products" is always 1/2 or 2/3rds of the full amount depending on the browser being used. The controller initialises before the while loop has finished running/returning all the promises. I'm a bit confused as to how to force the controller to wait for all the results from the while loop be fetched. Do I need to make a change in my service function, my controller or the router (or all three?). Or, is it that my use of the $q library is incorrect?

Inside my router:

    .state('products-map', {
        url: "/products-map",
        parent: 'base',
        templateUrl: "../components/products/products.map.html",
        data: { pageTitle: 'Products Map', pageSubTitle: 'map of all the products'},
        controller: "ProductsMapController",
        resolve: {
            deps: ['$ocLazyLoad', function($ocLazyLoad) {
                return $ocLazyLoad.load({
                    name: 'myApp',
                    insertBefore: '#ng_load_plugins_before',
                    files: [
                        { type: 'js', path: '//maps.google.com/maps/api/js?v=3&key=<my_api_key>&libraries=visualization,geometry'},
                        '../js/markerclusterer_packed.js',
                    ]
                });
            }],

            total_products: function(DashboardService) {
                return DashboardService.getTotalProducts();
            },

            products: function(DashboardService, total_products){
                return DashboardService.getPaginatedProducts(total_products);
            },

        }
    })

Inside my service function which handles the pagination:

this.getPaginatedProducts = function(total_product_count) {

    var total_fetched_results = 0;
    var total_number_of_products = total_product_count;
    console.log("total number of products in paginated products: ", total_number_of_products);
    var results_per_page = 20000;
    var page = 1;
    var products = [];

    var deferred = $q.defer();

    while (total_number_of_products > total_fetched_results) {

        $http({
            url: $rootScope.apiUrl + 'products/location',
            method: "GET",
            params: { 'results_per_page': results_per_page, 'page': page}
        }).then(function(response) {
            console.log("response from service", response);
            var response_data = response.data.data;
            for (var i = 0; i < response_data.length; i++) {
                products.push(response_data[i]);
            }
        });

        page++;
        total_fetched_results += results_per_page;
    }

    deferred.resolve(products);
    return deferred.promise;
};

Inside my controller:

angular.module('SS2').controller('ProductsMapController', ['$rootScope', 'products', '$scope', '$http', 'NgMap', 'total_products',
    function ($rootScope, products, $scope, $http, NgMap, total_products) {

        $scope.$on('mapInitialized', function (event, map) {

            console.log("ProductsMapController Initialised")
            console.log("total_products inside ProductsMapController is: ", total_products);
            $scope.map_products = products;
            console.log("inside controller number of products is: ", products);

Your use of the $q library is incorrect. Avoid the [deferred anti-pattern](https://stackoverflow.com/questions/30750207/is-this-a-deferred-antipattern). Use `$q.all` to combine multiple promises into a single promise that is resolved when all of the input promises are resolved. — georgeawg, Sep 20 '19 at 14:08

score 0 · Answer 1 · edited Sep 20 '19 at 18:04

0

There's a few approaches you can take here and using Promises certainly make sense. What I'm seeing happening with your while loop is a logic flaw where your $http requests aren't all resolved before your function hits its exit condition.

You might want to look into using $q.all() and building out an array of $http calls to make sure everything is resolved BEFORE you return your results as I suspect, when you look at your network monitor, you'll see calls not resolved before the results are rendered.

https://docs.angularjs.org/api/ng/service/$q#all

an excellent example is https://chariotsolutions.com/blog/post/angularjs-corner-using-promises-q-handle-asynchronous-calls/

edited Sep 20 '19 at 18:04

georgeawg

48,608
13
72
95

answered Sep 20 '19 at 14:37

CoGaMa64

20
2

The code in the example is dated and obsolete. It uses the [deferred anti-pattern](https://stackoverflow.com/questions/30750207/is-this-a-deferred-antipattern) and the obsolete `.success` method which has been [removed from the AngularJS framework](https://stackoverflow.com/questions/35329384/why-are-angularjs-http-success-error-methods-deprecated-removed-from-v1-6/35331339#35331339). – georgeawg Sep 20 '19 at 18:09
Thank you got clarifying, I seem to have got this working for now :) – HaDoMin Oct 03 '19 at 09:04

AngularJS service function not returning full promise after while loop has completed

1 Answers1