AngularJS Multiple GET requests, only first returning correctly

Question

I have the following in my controller:

ApiRequest.get('locations').then(function(locations) {
    $scope.locations = locations.locations;
});

ApiRequest.get('sublocations').then(function(sublocations) {
    $scope.sublocations = sublocations.sublocations;
});

ApiRequest.get('varieties').then(function (varieties) {
    $scope.varieties = varieties.varieties;
});

ApiRequest.get('tasks').then(function(tasks) {
    $scope.tasks = tasks.tasks;
});

ApiRequest.get('customers').then(function(customers) {
    $scope.customers = customers.customers;
});

ApiRequest.get('batches').then(function(batches) {
    $scope.batches = batches.batches;
    $ionicLoading.hide();
});

The data from each of these requests goes on to poplate select boxes in a form.

Here is my APIRequest service:

return {

        get: function(entity) {
            if($rootScope.online == false) {
                var data = {};
                data = JSON.parse(localStorage.getItem('data-' + entity));
                console.log(data);
                deferred.resolve(data);
            } else {
                $http.get($rootScope.baseUrl + entity).success(function(data) {
                    deferred.resolve(data);
                })
            }

            return deferred.promise;

        },
}

It would appear that for some reason the results aren't getting back from the service on time to display them in the view.

Is this something to do with the way I am handling the promise?

Answer 1

At first look, you declared the promise with $q outside your function as global (because I don't see inside). Try this one:

get: function(entity) {
        var deferred = $q.defer();
        if($rootScope.online == false) {
            var data = {};
            data = JSON.parse(localStorage.getItem('data-' + entity));
            console.log(data);
            deferred.resolve(data);
        } else {
            $http.get($rootScope.baseUrl + entity).success(function(data) {
                deferred.resolve(data);
            })
        }

        return deferred.promise;

    },

Answer 2

your current implementation has little to no error handling and is executing multiple API requests in parallel; I would recommend chaining the promises.

ApiRequest.get('locations').then(function(locations) {
    $scope.locations = locations.locations;

    return ApiRequest.get('sublocations');
}).then(function(sublocations) {
    $scope.sublocations = sublocations.sublocations;

    return ApiRequest.get('varieties')
}).then(function (varieties) {
    $scope.varieties = varieties.varieties;

    return ApiRequest.get('tasks')
}).then(function(tasks) {
    $scope.tasks = tasks.tasks;

    return ApiRequest.get('customers')
}).then(function(customers) {
    $scope.customers = customers.customers;

    return ApiRequest.get('batches')
}).then(function(batches) {
    $scope.batches = batches.batches;

    $ionicLoading.hide();
}, function(_error) {
    $ionicLoading.hide();
    console.log(_error);
});

and then your service can be simplified; the $http client returns a promise and using $q.when can return a promise also

    get: function(entity) {
        if($rootScope.online == false) {
            var data = {};
            data = JSON.parse(localStorage.getItem('data-' + entity));
            console.log(data);
            $q.when(data);
        } else {
            return $http.get($rootScope.baseUrl + entity)
        }
    },