Cham
Cham

Reputation: 857

$q.all() returns an array of undefined values

I have 3 functions that request data from backend. Following is the code in the controller.js file

$scope.getList1 = = function () {
    service.getList1(constants.getUrl1).then(
        function success(data) { 
            $scope.list1 = data.data.list1;               

            return data;

        }, function error() { 

        });
};

$scope.getList2 = = function () {
    service.getList2(constants.getUrl2).then(
        function success(data) { 
            $scope.list2 = data.data.list2;               

            return data;

        }, function error() { 

        });
};

$scope.getList3 = = function () {
    service.getList3(constants.getUrl3).then(
        function success(data) { 
            $scope.list3 = data.data.list3;               

            return data;

        }, function error() { 

        });
};

And in my service.js file, I have $http requests to fetch the data from the server. Following is my code in the service.js

this.getList1 = function (getUrl1) {
    return $http({
        method: 'GET',
        url: getUrl1
    });
};

this.getList2 = function (getUrl2) {
    return $http({
        method: 'GET',
        url: getUrl2
    });
};

this.getList3 = function (getUrl3) {
    return $http({
        method: 'GET',
        url: getUrl3
    });
};

then I in a separate function I have called like below

$scope.initialise = function () {

    var requestArray = [$scope.getList1(), $scope.getList2(), $scope.getList3()];

    $q.all(requestArray).then(function (response) { 
        console.log(response);

        //other logic after successful completion of all 3 requests
    });
};

But in the response, I get an array of 3 'undefined' values e.g [undefined, undefined, undefined]

What am I doing wrong here. Any suggestions ?.

Thanks.

Upvotes: 1

Views: 176

Answers (1)

Artem Arkhipov
Artem Arkhipov

Reputation: 7455

Add return statement in functions in your $scope.

$scope.getList1 = = function () {
    /** here-> */ return service.getList1(constants.getUrl1).then(
        function success(data) { 
            $scope.list1 = data.data.list1;               

            return data;

        }, function error() { 

        });
};

And so on.

Issue is that your functions in service are returning promises, but functions in scope are not returning anything.

Upvotes: 3

Related Questions