CODEWITHSUNDEEP
javascriptangularjs
Sumit Kumar
Sumit Kumar

Reputation: 404

how to wait for angular http method to complete

This is my function for getting data from server 

function getAll_Tables() {
  $scope.tableList = [];
  $http({
    method : 'GET',
    url : '/abc/GetTables',
    headers : {'Content-Type' : 'application/json'}
  }).success(function(data) {
      $('#T_LoaderSpinner').hide();
      if (data.StatusCode === 101) {
        if (data.Data != null) {
          for (var i = 0; i < data.Data.length; i++) {
            $scope.tableList.push(data.Data[i]);
          }
        }
      } else {
        alert("We could not process your request......Please try later.")
      }
    })
    .error(function(data) {
      $('#T_LoaderSpinner').hide();
      alert("We could not process your request......Please try later.")
    });
}

and my another function to use that data is :

$scope.load_policy = function(id, type) {
  $scope.getRuleList();
  getAll_ScoringTables(); 
  alert(JSON.stringify($scope.tableList));
}

My tableList is not get updated - how to get updated tableList here?

Upvotes: 1

Views: 210

Answers (3)

Fissio
Fissio

Reputation: 3758

Your problem is that getAll_Tables() is asynchronous, so in the function that uses it, when you do the alert the data hasn't been fetched yet. You need to wait for this promise to complete. I would suggest the following changes:

function getAll_Tables() {
  $scope.tableList = [];
  return $http({ // ADDED RETURN HERE
    method : 'GET',
    url : '/abc/GetTables',
    headers : {'Content-Type' : 'application/json'}
  }).success(function(data) {
      $('#T_LoaderSpinner').hide();
      if (data.StatusCode === 101) {
        if (data.Data != null) {
          for (var i = 0; i < data.Data.length; i++) {
            $scope.tableList.push(data.Data[i]);
          }
          return; // ADDED RETURN HERE
        }
      } else {
        alert("We could not process your request......Please try later.")
      }
    })
    .error(function(data) {
      $('#T_LoaderSpinner').hide();
      alert("We could not process your request......Please try later.")
    });
}

So here we're returning the $http function out of getAll_Tables(), so we can .then it in the other function, or in other words, wait until the request is complete before continuing with the code inside the .then function.

$scope.load_policy = function(id, type) {
  $scope.getRuleList();
  getAll_ScoringTables()
  .then(function() {
    alert(JSON.stringify($scope.tableList)); // tableList has the correct data now
  })
}

Upvotes: 1

Icepickle
Icepickle

Reputation: 12796

You would either need to return the http request, and simply handle the success inside your load policy, or you could use a callback to call an anonymous function that gets called from your success method. This would then call your anonymous function after the success went through

function getAll_Tables(callback) { 
    $scope.tableList = [];
    $http({
        method : 'GET',
        url : '/abc/GetTables',
        headers : {'Content-Type' : 'application/json'}
    }).success(function(data) { 
        $('#T_LoaderSpinner').hide();
        callback();
    }).error(function(data) { 
        $('#T_LoaderSpinner').hide();
        alert("We could not process your request......Please try later.")
    });
}  

$scope.load_policy = function(id, type) { 
    $scope.getRuleList(function() {
        getAll_ScoringTables(); 
        alert(JSON.stringify($scope.tableList));
    });
}

So one of the other options would be

function getAll_Tables(callback) { 
    $scope.tableList = [];
    return $http({
        method : 'GET',
        url : '/abc/GetTables',
        headers : {'Content-Type' : 'application/json'}
    });
}  

$scope.load_policy = function(id, type) { 
    $scope.getRuleList.success(function() {
        getAll_ScoringTables(); 
        alert(JSON.stringify($scope.tableList));
    }).error(function() {
        alert('failed');
    });
}

Upvotes: 1

Alexander_F
Alexander_F

Reputation: 2879

here is a more comfortable way, use promoises

var promise1 = $http({method: 'GET', url: 'a/pi-one-url', cache: 

'true'});
var promise2 = $http({method: 'GET', url: '/api-two-url', cache: 'true'});

$q.all([promise1, promise2]).then(function(data){
    console.log(data[0], data[1]);
});

Upvotes: 4

Related Questions