In angular function not waiting to complete first function execution

Question

my function didnt wait to complete earlier function execution and it is completing.

I have my code is that i am doing some thing wrong:

$scope.abc1 = function(){
 var arrayJson = [{'name':'max','age':'12'},{'name':'tax','age':'16'}]
 for(var i=0; i<arratJson.length;i++){
  var getAddress = $scope.xyz(arratJson[i].name);
    }
  $scope.createBody();

 };
 $scope.createBody = function(){
 //some more code here
 };
 $scope.xyz = function(name){
    $http({
            method: 'GET',
            url: 'rest/address',
            type:'json',
            headers:{'action':'single','name':name},  
            }).success(function(response){
             return response;
            }).error(function(response){

            });
   };

so in this it is not waiting to get address instead of it moving down so how to wait finishing for loop and then call different function. createBody function called before the $scope.xyz() function returns the value how to wait until loop finishes

Possible duplicate of [Call An Asynchronous Javascript Function Synchronously](http://stackoverflow.com/questions/9121902/call-an-asynchronous-javascript-function-synchronously) — Aprillion, Jan 30 '16 at 10:44
here you are calling one function only. Are you calling second function after this? — Deepak Dholiyan, Jan 30 '16 at 10:45

score 2 · Answer 1 · answered Jan 30 '16 at 10:46

2

This is expected due to asynchronous nature of execution. You should use callbacks to avoid this problem.

answered Jan 30 '16 at 10:46

Nijeesh

848
7
11

Can you suggest me any nice example – Mayur Jan 30 '16 at 11:10

koox00 · Answer 2 · 2016-02-02T10:34:25.820

You should use the $q service.
first store all $http calls in an array and with $q.all(array) you create a promise that is resolved after all $http promises have resolved.

e.g:

$scope.abc1 = function(){
  var arrayJson = [{'name':'max','age':'12'},{'name':'tax','age':'16'}]
  var promises = [];
  for(var i=0; i<arratJson.length;i++){
    promises.push($scope.xyz(arratJson[i].name));
  }

  $q.all(promises).then($scope.createBody);

};

And on the resolve of this new promise you can call your createBody function.

For this to work You should also change success callback on the $scope.xyz to a then callback and return the promise.

e.g:

$scope.xyz = function(name){
  return $http({
    method: 'GET',
    url: 'rest/address',
    type:'json',
    headers:{'action':'single','name':name},  
  }).then(function(response){
    return response;
  })["catch"](function(response){

  });
};

UPDATE

If you don't care if all calls succeed, replace:

$q.all(promises).then($scope.createBody);

With:

$q.all(promises)["finally"]($scope.createBody);

PS: Keep in mind that in the finally callback you don't get the return values of every call, whereas in the then an array will be passed as argument in the callback function which holds in every position a return value of each $http call.

Thanks for your reply let me try this and revert back to you — Mayur, Jan 30 '16 at 13:06

score 0 · Answer 3 · answered Jan 30 '16 at 10:48

0

There are two way to achieve this

1)Use async:false

2)Need to use callback

choose your way and enjoy!

answered Jan 30 '16 at 10:48

Deepak Dholiyan

1,774
1
20
35

Thanks for your reply .. where to mention async: false in my function; – Mayur Jan 30 '16 at 11:11
Hi Mayur, just add async: false, under or before type:'json', – Deepak Dholiyan Jan 30 '16 at 16:37
Tell me if more help needed – Deepak Dholiyan Jan 30 '16 at 16:37

score 0 · Answer 4 · answered Jan 30 '16 at 10:55

You should how promises works in javascript.

$http is an asynchronous function. You must return $http result in $scope.xyz function and use then, success, error function callbacks.

Example:

function xyz() {
   return $http(...);
}

xyz().then(function(data) {
    address = data.data.address; // in your json dto format
})

more info https://docs.angularjs.org/api/ng/service/$http

hope this helps! regards

score 0 · Answer 5 · answered Jan 30 '16 at 17:13

You can use Angular promises.

Include promise status to self created object with deferred value, that has valueOf and toString methods. Last two methods allow to use arithmetic, string and comparison operators.

Object with deferred value:

 var DeferredValue = function(initial){
    var self = this;
    self._value = initial; 
    var deferred = $q.defer();
    self.$promise = deferred.promise;
    self.$resolved = false;
    self.$resolve = function(value){
      deferred.resolve(value);
    }
    self.$promise.then(function(v){
      self._value = v;
      deferred = null;
      self.$resolved = true;
      delete self.$resolve;
      return self.$promise;
    });
  }

  DeferredValue.prototype = {
    constructor: DeferredValue,
    valueOf: function(){
      return this._value
    },
    toString: function(){
      return this._value.toString()
    }
  }

Return this object in your ASYNC function, and resolve them after retrieving data:

var getValue = function(){
  var value = new DeferredValue();
  $timeout(function(){
    value.$resolve(Math.floor(Math.random() * 10))
  },1500);
  return value;
}

Plunker example

In angular function not waiting to complete first function execution

5 Answers5

UPDATE