How to make sure that the variable is not null while using promise chaining approach?

Question

I am using init as follows

$scope.init = function () {
    $scope.getAllDetails();
};

$scope.getAllDetails= function () {
    $http({
        method: "GET",
        url: "api/endpoint"
    }).then(function mySuccess(response) {
            $scope.processData();
        }, function myError(response) {
            console.log(response.statusText);
        }
    );
};

$scope.processData() = function() {
//Logic to calculate var1
// var1 is then passed to $scope.getID to make call to Service1.getId(var1)

}

I have my first function which returns a promise:

$scope.getID = function() {
    return Service1.getId("abc").then(function(response){
    // In above line. Instead of manually passing `abc` I want to 
    //pass it as variable var1  
    // The desired call should be as below. 
    //But var1 is having null here
  //return Service1.getId(var1).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;
    });
};

The second function returns 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 chaining 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);
});

Problem: The problem I am facing is related to var1 in $scope.processData() The var1 is always having null value within $scope.getID the var1 value is undefined

**Note:** the code in this question were take from [this answer - The promises from the two services need to be chained](https://stackoverflow.com/a/56052614/5535245) to the OPs question from two days ago -- [How to pass data from one asynchronous to another asynchronous function in AngularJS](https://stackoverflow.com/questions/56051521/how-to-pass-data-from-one-asynchronous-to-another-asynchronous-function-in-angul) — georgeawg, May 11 '19 at 20:13

Mattias Martens · Answer 1 · 2019-05-11T19:54:37.553

0

Sounds like this could be a problem with closures. A function will have access to the containing closures of the code where it was defined, not where it is called.

Is var1 truly null, or is it in fact undefined? If it's undefined, probably what you need to do is make getId take var1 as an argument instead of relying on pulling the reference from the containing closure (which will not work for the reason stated above). If it's truly null, then the problem probably lies in the code that calculates var1, which you've omitted.

EDIT: The getID() function would look very similar, but it would start like this:

$scope.getID = function(var1) {

Instead of this:

$scope.getID = function(var1) {

And to call it you would probably do something like this:

var var1 = somethingToGetTheValueOfVar1();
$scope.getID(var1);

edited May 11 '19 at 19:54

answered May 11 '19 at 19:24

Mattias Martens

1,369
14
16

the `var1` value is `undefined` – meallhour May 11 '19 at 19:37
can you please suggest how the updated `getId` will look like? – meallhour May 11 '19 at 19:42
Added to my original answer. Having getId take an argument, though, will mean you'll have to change how you chain your promises at the end. Let me know if I can offer some pointers on how to do that. – Mattias Martens May 11 '19 at 19:58

georgeawg · Answer 2 · 2019-05-12T06:46:38.173

The problem I am facing is related to var1 in $scope.processData() The var1 is always having null value within $scope.getID the var1 value is undefined

Add var1 as a parameter to the function definition:

̶$̶s̶c̶o̶p̶e̶.̶g̶e̶t̶I̶D̶ ̶=̶ ̶f̶u̶n̶c̶t̶i̶o̶n̶(̶)̶ ̶{̶
$scope.getID = function(var1) {
    //return Service1.getId("abc").then(function(response){
    // In above line. Instead of manually passing `abc` I want to 
    //pass it as variable var1  
    // The desired call should be as below. 
    //But var1 is having null here
    return Service1.getId(var1).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;
    });
};

I am trying to call the function as following but it is not working
$scope.processData() = function() { ... $scope.getID(var1); }

The left-hand side of an assignment statement must be a variable or property accessor.

$̶s̶c̶o̶p̶e̶.̶p̶r̶o̶c̶e̶s̶s̶D̶a̶t̶a̶(̶)̶ ̶=̶ ̶f̶u̶n̶c̶t̶i̶o̶n̶(̶)̶ ̶{̶ ̶
$scope.processData = function(data) { 
    //... 
    var var1 //= something
    return $scope.getID(var1); 
}

Then be sure to chain properly:

$scope.getAllDetails= function () {
    return $http({
        method: "GET",
        url: "api/endpoint"
    }).then(function mySuccess(response) {
        var data = response.data;
        return $scope.processData(data);
    }, function myError(response) {
        console.log(response.statusText);
        //IMPORTANT RE-THROW error
        throw response;
    });
};

It is important to return values to .then blocks. Otherwise the new promise will resolve as undefined.

Also it is important to throw from .catch blocks. Otherwise the new promise will be converted from a rejected promise to a fulfilled promise.

For more information, see

You're Missing the Point of Promises

I am trying to call the function as following but it is not working `$scope.processData() = function() { ... $scope.getID(var1); }` — meallhour, May 12 '19 at 01:58

How to make sure that the variable is not null while using promise chaining approach?

2 Answers2