CODEWITHSUNDEEP
angularjsfunctionhttpresponse
Ali Briceño
Ali Briceño

Reputation: 1134

AngularJS wait for external function response to continue

I have this function on my controller:

   // Get a specific Parte
    partesc.getParte = function (id) {
            var url = endpointApiURL.url + "/fabricante/" + id;
            $scope.PartesPromise = $http.get(url)
                .then(function (response) {
                    partesc.parte= response.data;
                })
                .catch(function (error) {
                    console.log(error);
                    if (error.status == '412') {
                        console.log('Error obteniendo datos: ' + error.data.error);
                    }
                });
        }

And i have this second function:

partesc.openEdit = function(id) {
partesc.getParte(id);
    console.log(partesc.parte); }

I call openEdit function from a button on the front end. So the console.log part prints undefined. I think that is not waiting for the response of the calling the function getParte(id).

How i can make that wait for the response of the function to print the result? i'm doing this on the wrong way?

UPDATE 1

The console.log is just for reference. I need use the data that return the another function (getParte) inside the another one (openEdit)

SOLUTION

I find the solution thanks to the answer that i accepted here.

        // Get a specific Parte
    partesc.getParte = function (id) {
            var url = endpointApiURL.url + "/fabricante/" + id;
             return $http.get(url)
                .then(function (response) {
                    partesc.parte= response.data;
                })
                .catch(function (error) {
                    console.log(error);
                    if (error.status == '412') {
                        console.log('Error obteniendo datos: ' + error.data.error);
                    }
                });
        }


partesc.openEdit = function(id) {
    $scope.PartesPromise = partesc.getParte(id)
                            .then(function() {
                                console.log(partesc.parte);
                                }); 
}

Thanks

Upvotes: 0

Views: 2243

Answers (5)

Dev
Dev

Reputation: 3932

You can return promise and from the function use it as below:

angular.module("myApp",[])
.controller('ctr1', function(sample){
 sample.sampleFn().then(function(data){
  console.log(data);
 })
})
.factory('sample', function($http){
  return {
    sampleFn : sampleFn
  }

 function sampleFn(){
    return $http.get('response.json').then(function(response){
            return response.data;
         }, function(){
            $q.reject("Failed");
        })
 }
})

Sample Working Plunk

Upvotes: 0

Vasu Rawal
Vasu Rawal

Reputation: 21

You can use the $q service in order to overcome the problem

// inject $q in the controller

partesc.getParte = function (id) {
           var deferred = $q.defer(),
              url = endpointApiURL.url + "/fabricante/" + id;
            $scope.PartesPromise = $http.get(url)
                .then(function (response) {
                    partesc.parte= response.data;
                    deferred.resolve(response.data);
                })
                .catch(function (error) {
                    console.log(error);

                    if (error.status == '412') {
                        console.log('Error obteniendo datos: ' + error.data.error);
                    }

                 deferred.reject(error);
                });

           return deferred.promise;
        }

And the use the above function as follows:

partesc.openEdit = function(id) {
partesc.getParte(id).then(function(response){
       partesc.parte = response
       console.log(partesc.parte);
      })
      .catch(function(error){
      }); 
}

Upvotes: 0

Groben
Groben

Reputation: 1386

Then if you can return the promise:

 partesc.getParte = function (id) {
     var url = endpointApiURL.url + "/fabricante/" + id;
     return $http.get(url);
 };

partesc.openEdit = function(id) {
    partesc.getParte(id).then(function(response){
    // stuff you want to do
    });
};

Upvotes: 1

Ron Dadon
Ron Dadon

Reputation: 2706

You can use the promise to do so:

partesc.getParte = function (id) {
        var url = endpointApiURL.url + "/fabricante/" + id;
        return $scope.PartesPromise = $http.get(url)
            .then(function (response) {
                partesc.parte= response.data;
            })
            .catch(function (error) {
                console.log(error);
                if (error.status == '412') {
                    console.log('Error obteniendo datos: ' + error.data.error);
                }
            });
    }

This will return the promise, so you can wait for the resolve or reject in your controller, like so:

partesc.openEdit = function(id) {
    partesc.getParte(id).then(function() {
        console.log(partesc.parte);
    }); 
}

Upvotes: 1

nishant agrawal
nishant agrawal

Reputation: 471

Use console.log inside then function.

partesc.getParte = function (id) {
            var url = endpointApiURL.url + "/fabricante/" + id;
            $scope.PartesPromise = $http.get(url)
                .then(function (response) {
                    partesc.parte= response.data;
                    console.log(partesc.parte);
                })
                .catch(function (error) {
                    console.log(error);
                    if (error.status == '412') {
                        console.log('Error obteniendo datos: ' + error.data.error);
                    }
                });
        }

Because this is async call and next line of code gets executed after your function call and till then there is no response so you get value as undefined outside your function.

Upvotes: 0

Related Questions