Angular js wait for data before return

Question

I have an angular service where I make an http post call. Also, some constant values are set there. In the end I use return to send these data to the controller, do some logic and display them in a view.

The service code:

var apiurl = 'myurl';
  var apidata = {data: 'mydata'};
  var myDataPromise = httppostrequest($http, apiurl, apidata);

    myDataPromise.then(function(result) {
        service.datas = result;
        console.log("data.name"+result);
    });
    return service;

The httppostrequest function:

function httppostrequest($http, apiurl, apidata){
    return $http({
        method : "POST",
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        url: apiurl,
        data: JSON.stringify(apidata),
        timeout: 5000
    });
}

The request is successful and returns the data. The problem is that the line

return service;

is executed before the data from the request are assigned to the service variable. Therefore the data from the post request are not even passed to the controller.

I have worked with node js, where there are ways and tools to avoid the asynchronous nature when needed. With angularjs I don't get it.

quirimmo · Accepted Answer · 2017-06-21 22:55:44Z

3

You described perfectly what is happening. So my suggestion is to init the value of datas inside the service to an empty value (object, array, or whatever it will be after fetched the promise), associate the promise to the service, and simply move the promise resolution where you really need to manipulate that data. So inside your service:

var apiurl = 'myurl';
var apidata = {data: 'mydata'};
service.datas = []; // if it will be an array for example
service.myDataPromise = httppostrequest($http, apiurl, apidata);

return service;

And then wherever you need it, just inject your service and do:

myService.myDataPromise.then(function(result) {
  myService.datas = result;
  console.log("data.name"+result);
});

answered Jun 21, 2017 at 22:55

quirimmo

10k3 gold badges33 silver badges46 bronze badges

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

3 Comments

Amelia Grimaldi Over a year ago

In case I misunderstand, are you suggesting that I inject the service somewhere else (ex. the controller)?

quirimmo Over a year ago

yep exactly, you got it

Amelia Grimaldi Over a year ago

Thanks, that actually worked. And I think I also understood the logic of it.

Pritam Banerjee · Accepted Answer · 2017-06-21 22:34:22Z

1

Whatever return you have you will have to put it inside the success method. Otherwise you will see that issue.

You can do something like this:

 var data = {} //your data
 var promiseURLMetaData = HttpService.httpPost("parseUrlMetadata", data);
 promiseURLMetaData.then(function (response) {
     var urlMetaData = response.data;
     return urlMetaData;
  })
 .catch(function (error) {
    console.log("Something went terribly wrong while trying to get URL Meta Data.");
 });

answered Jun 21, 2017 at 22:34

Pritam Banerjee

19.1k10 gold badges97 silver badges113 bronze badges

3 Comments

Amelia Grimaldi Over a year ago

Tried that. Now nothing gets returned, although the then block is executed successfully. Also there is no error (i changed the log in the catch block so that it displays errors)

Pritam Banerjee Over a year ago

Is that service an angular service?

Pritam Banerjee Over a year ago

@AmeliaGrimaldi What you can do is have a service, then add setters and getters for the data. Then once you get the data from the http call add it through the setter and then when you access the data, access it through the getter. That is the only way.

Vivek · Accepted Answer · 2017-06-22 07:52:49Z

0

Return your service inside the result function.

var apiurl = 'myurl';
var apidata = {data: 'mydata'};
var myDataPromise = httppostrequest($http, apiurl, apidata);

    myDataPromise.then(function(result) {
        service.datas = result;
        console.log("data.name"+result);
        return service;
    });

answered Jun 22, 2017 at 7:52

Vivek

12 bronze badges

Collectives™ on Stack Overflow

Angular js wait for data before return

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related