How to pass data from one asynchronous to another asynchronous function in AngularJS

Question

How to pass global variable value from one function to another function in angular?

I have 2 global variables as:

$scope.genewtId = null;
$scope.data1 = null;

I have 2 angular functions which look as below:

$scope.getID = function() {
    Service1.getId("abc").then(function(response){
        $scope.genewtId = response.data[0].Id;
        console.log($scope.genewtId);

    }, function(error){
        console.log(error.statusText);
    });
};

$scope.getDetails = function() {
    Service2.getDetails($scope.genewtId).then(function(response){
        // here response is having an error
        $scope.data1 = response.data;
        console.log($scope.data1.toString());
    }, function(error){
        console.log(error.statusText);
    });
};

When I pass value of $scope.genewtId from one function to another function, I get an error

message: "Failed to convert value of type 'java.lang.String' to required type 'java.lang.Integer'; nested exception is java.lang.NumberFormatException: For input string: "null""

However, console.log($scope.genewtId); is returning a value 787651 which means it is not null.

Please suggest if it can be implemented using $rootScope.$broadcast

Shashank Vivek · Answer 1 · 2019-05-10T05:31:54.117

The only reason I can think of is because of asynchronous call of promises. What's happening is that :

Somehow, you are calling Service2.getDetails($scope.genewtId) before the value of $scope.genewtId has been set after the promise completion of Service1.getId("abc").then, and so the value remains null

Try:

$scope.getID = function(isCalledAfterDetails) {
    Service1.getId("abc").then(function(response){
        $scope.genewtId = response.data[0].Id;
        console.log($scope.genewtId);
        if(isCalledAfterDetails && $scope.genewtId !== null){
            $scope.getDetails();
        }

    }, function(error){
        console.log(error.statusText);
    });
};

$scope.getDetails = function() {
    if($scope.genewtId === null){
        $scope.getID(true);
    }else{
        Service2.getDetails($scope.genewtId).then(function(response){
            // here response is having an error
            $scope.data1 = response.data;
            console.log($scope.data1.toString());
        }, function(error){
            console.log(error.statusText);
        });
    }

};

Even, if this approach works, I would strongly suggest you to implement the function calls in a better way because $scope.getDetails() is dependent on $scope.getID() for setting value of $scope.genewtId.

If you want suggestion on how to implement it, please update the question with the use case and some more code

Update

$scope.getID = function() {
    Service1.getId("abc").then(function(response){
        $scope.genewtId = response.data[0].Id;
        $scope.getDetails();
    }, function(error){
        console.log(error);
    });
};

$scope.getDetails = function() {
        Service2.getDetails($scope.genewtId).then(function(response){
            // here response is having an error
            $scope.data1 = response.data;
            console.log($scope.data1.toString());
        }, function(error){
            console.log(error.statusText);
        });        
};

Using service

In service.js

getDetails = function(id){
    var deferred = $q.derfer();
    $http.get('/user/'+id).then(function(response){
        var newId = response.data[0].Id;
        $http.get('/user/details'+newId).then(function(details){
            deferred.resolve(details)
        })
    })      
    return deferred.promise;
}

controller.js

$scope.getDetails = function() {
        MySvc.getDetails("abc").then(function(response){
            console.log(response) // your details here
        }, function(error){
            console.log(error.statusText);
        });        
};

Please suggest if it can be implemented using `$rootScope.$broadcast` — meallhour, May 09 '19 at 04:44
@meallhour : and how are these functions dependent ? 1. Do you want to call `getDetails` after you get the ID from `getID` ? 2. or can they exist in separate `controller` ? Using events means that they are dependent on each other and they exist in separate `controller`. So, they have to notify each other about their changes — Shashank Vivek, May 09 '19 at 04:59
1. Do you want to call getDetails after you get the ID from getID `Yes this is true` — meallhour, May 09 '19 at 05:08
can they exist in separate controller ? `They are existing in the same controller and not separate controler` — meallhour, May 09 '19 at 05:08
@meallhour Check my updated code. Call `getDetails()` after the `Service1.getId()` is resolved. You can also move both logic `getId` and `getDetails` in the same Service as well and provide a single response with `ID` and `DETAILS` — Shashank Vivek, May 09 '19 at 05:14
@meallhour added example to use service, Make sure u are injecting `$q` and `$http` in the factory — Shashank Vivek, May 09 '19 at 05:39
Avoid the [deferred anti-pattern](https://stackoverflow.com/questions/30750207/is-this-a-deferred-antipattern). As written, the case where the $http returns a rejected promise is handled incorrectly. — georgeawg, May 10 '19 at 04:05
@georgeawg : I have nested `$http` , the example you have shared seems to be just for one `$http` call — Shashank Vivek, May 10 '19 at 05:32

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

The promises from the two services need to be chained

Modify the first function to return a promise:

$scope.getID = function() {
    return Service1.getId("abc").then(function(response){
        $scope.genewtId = response.data[0].Id;
        console.log($scope.genewtId);
        return response.data[0].Id;
    }, function(error){
        console.log(error.statusText);
        throw error;
    });
};

Modify the second function to both return a promise and accept an argument:

$scope.getDetails = function(id) {
    var genewtID = id || $scope.genewtId;
    return Service2.getDetails(genewtId).then(function(response){
        $scope.data1 = response.data;
        console.log($scope.data1.toString());
        return response.data;
    }, function(error){
        console.log(error.statusText);
        throw error;
    });
};

Then chain the two promises:

var promise = $scope.getId();

var promise2 = promise.then(function(id) {
                   return $scope.getDetails(id);
               });

var promise2.then(function(data) {
     console.log(data);
}).catch(function(error) {
     console.log(error);
});

By using the .then method of the getId promise, the code waits for the id value to arrive from the server before making the request to getDetails.

Because calling the .then method of a promise returns a new derived promise, it is easily possible to create a chain of promises. It is possible to create chains of any length and since a promise can be resolved with another promise (which will defer its resolution further), it is possible to pause/defer resolution of the promises at any point in the chain.

For more information, see

score 0 · Answer 3 · answered May 09 '19 at 05:31

It seems like the exception is coming from the server side.

Failed to convert value of type 'java.lang.String' to required type 'java.lang.Integer'; nested exception is java.lang.NumberFormatException: For input string: "null"

It is getting printed on the console due to console.log(error.statusText);

You need to verify the logic when the value is used in the API.

How to pass data from one asynchronous to another asynchronous function in AngularJS

How to pass global variable value from one function to another function in angular?

3 Answers3

Update

Using service

The promises from the two services need to be chained

Linked