AngularJS wait for external function response to continue

Question

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

can you log from here ? $http.get(url) .then(function (response) { partesc.parte= response.data; console.log(partesc.parte); }) — Groben
– Groben, Commented Feb 2, 2017 at 15:56
you can return the promise from the function itself and then use .then(successCallback) on the returned promise object. — Dev
– Dev, Commented Feb 2, 2017 at 15:56
I update my answer see the update 1 my friend @Groben thanks — Ali Briceño
– Ali Briceño, Commented Feb 2, 2017 at 16:01

Groben · Accepted Answer · 2017-02-02 16:03:39Z

1

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
    });
};

answered Feb 2, 2017 at 16:03

Groben

1,3862 gold badges10 silver badges29 bronze badges

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

2 Comments

Ali Briceño Over a year ago

This works my friend. Thanks a lot! I update my answer thanks to you.

Groben Over a year ago

Careful, I think the way you updated your answer doesn't allow your code to work.

Ron Dadon · Accepted Answer · 2017-02-02 16:01:51Z

1

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);
    }); 
}

answered Feb 2, 2017 at 16:01

Ron Dadon

2,7061 gold badge16 silver badges27 bronze badges

1 Comment

Ali Briceño Over a year ago

I try this my friend and i have an error: "TypeError: Cannot read property 'then' of undefined"

nishant agrawal · Accepted Answer · 2017-02-02 15:57:43Z

0

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.

answered Feb 2, 2017 at 15:57

nishant agrawal

4712 silver badges7 bronze badges

2 Comments

Ali Briceño Over a year ago

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

nishant agrawal Over a year ago

You can call openEdit with the data returned in place of console.log

Vasu Rawal · Accepted Answer · 2017-02-02 16:08:37Z

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){
      }); 
}

Dev · Accepted Answer · 2017-02-02 16:09:10Z

0

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

answered Feb 2, 2017 at 16:09

Dev

3,9323 gold badges26 silver badges44 bronze badges

1 Comment

Dev Over a year ago

Grt. Happy to help :-)

Collectives™ on Stack Overflow

AngularJS wait for external function response to continue

5 Answers 5

2 Comments

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related