Search code examples
javascriptangularjsangular-promiseangularjs-serviceangularjs-http

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?

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

Solution

  • 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