Call a asynchronous method after another in AngularJS

Question

I have a $watch attached to the appId variable. SO, when appId get changed it called the init function

$scope.$watch('appId', function() {                
    if ($scope.appId != '') {
        console.log('Inside appId watch');
        $scope.init();
    }
});

init() calls two service methods

$scope.init = function() {

    if ($scope.appId === undefined || $scope.appId == '') return false;

    $scope.getPrincipals($scope.loadPrincipals);
    $scope.getSignaturesByAppId($scope.loadSignatures);     

};

The methods are

$scope.getSignaturesByAppId = function (callback) {
    ApplicationDataSource.getSignaturesByAppId($scope.appId, function (result) {
        callback(result);
        $scope.$apply();
    });
};


$scope.loadSignatures = function (result) {
    var signatureResultSet = angular.fromJson(result[0]);
    $scope.appSignatures = signatureResultSet;

    if($scope.appSignatures.length===0){
        $scope.setDefaultValue();
    }
    else{
        $scope.setValueFromObject();
    }

};

$scope.getPrincipals = function (callback) {
    ApplicationDataSource.getApplicationPrincipalList($scope.appId, function (result) {
        callback(result);
        $scope.$apply();
    });
};

$scope.loadPrincipals = function (result) {
    var guarantorResultSet = angular.fromJson(result[0]);
    $scope.principals = guarantorResultSet;
};

The problem occurs here. In loadSignatures(), I have called a method setDefaultValue() which needs the data retrieve from loadPrincipals. So, when, loadSignatures called, principal data is not updated.

How to call the $scope.getPrincipals($scope.loadPrincipals) after $scope.getSignaturesByAppId($scope.loadSignatures) finish to retrieve data.

zuckerburg · Accepted Answer · 2018-12-20 06:38:22Z

2

You can use Promises, here is an example:

var promise = callThatRunsInBackground();

promise.then(
  function(answer) {
    // do something
  },
  function(error) {
    // report something
  },
  function(progress) {
   // report progress
  });

So in your code it might look like (I will leave it to you to fix as I'm not going to compile or check for syntax errors):

var getPrincipals = $scope.getPrincipals($scope.loadPrincipals);

getPrincipals.then(
       function(datapayload) {  
            //do something with datapayload perhaps
            $scope.getSignaturesByAppId($scope.loadSignatures); 
     });

This will make it wait until getPrincipals is finished before running getSignaturesbyAppId

answered Dec 20, 2018 at 6:38

zuckerburg

3382 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Noor A Shuvo Over a year ago

It says, can not read property then of undefined. Why the getPrincipals is undefined here ?

zuckerburg Over a year ago

i cannot comment on why it's not working for you right now without downloading your project and debugging it myself. however, with promises you're on the correct path to solving the issue you're experiencing

zuckerburg Over a year ago

Here is some additional reading: chariotsolutions.com/blog/post/…

Noor A Shuvo · Accepted Answer · 2018-12-20 07:03:00Z

0

What solve my issue is, I called $scope.getSignaturesByAppId($scope.loadSignatures); in loadPrincipals callback function, not in init()

$scope.loadPrincipals = function (result) {
       var guarantorResultSet = angular.fromJson(result[0]);
       $scope.principals = guarantorResultSet;

       $scope.getSignaturesByAppId($scope.loadSignatures); 
};

answered Dec 20, 2018 at 7:03

Noor A Shuvo

2,8853 gold badges28 silver badges53 bronze badges

2 Comments

zuckerburg Over a year ago

Brilliant, glad you got it sorted. This is basically a promise. Apologies for not giving more examples. Without an Angular version I'm usually just able to give advice to the point where you finally solve the issue you had

Noor A Shuvo Over a year ago

No problem. Got the idea from your answer. Accepted the answer.

Collectives™ on Stack Overflow

Call a asynchronous method after another in AngularJS

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related