Return data from service not returning proper data

Question

I wrote an Angular service that gets some fake data from my C# backend. The C# backend is using an ASMX file for the process. I have data coming back and everything is all nice and then my data never populates.

I have this feeling it has something to do with the data pass off coming back from the promise.

Service:

app.service('fakeDataCenter', function ($http) {
    this.getFakeData = function ()
    {
        var obj = {
            phoneNumber: "",
            faxNumber: "",
            address: "Loading..",
            };
        $.ajax({
            type: "POST",
            url: "/Services/DataService.asmx/getFakeData",
            cache: false,
            contentType: "application/json; charset=utf-8",
            data: "{}",
            dataType: "json",
            success: function(data, status){
                obj = data;
            }
        });

        return obj;
    };});

I can tell that I hit return obj, before I hit the line obj = data. How do I make the code return only after data has been populated.

I have already tried putting the return statement inside the success function without any luck. It just returns an undefined object.

You should consider using `$http` from AngularJS rather than jQuery's `$.ajax`. The answer here is that ajax is asynchronous, so you're returning `obj` before it's done. See http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call — Heretic Monkey, Jan 31 '17 at 20:58
Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Heretic Monkey, Jan 31 '17 at 20:58
I have changed my code to implement the $http AngularJS way still getting undefined back because it hits the return statement before it hits the promise result. — Bailey Miller, Jan 31 '17 at 21:10

score 1 · Accepted Answer · answered Jan 31 '17 at 21:02

I recommend you to use the angular approach, since you are using angular in your app. Change your service method like this:

this.getFakeData = function (){
   var obj = {
            phoneNumber: "",
            faxNumber: "",
            address: "Loading..",
            };
    return $http.post('/Services/DataService.asmx/getFakeData', obj).then(
          function (res){
             return res.data;
          },
          function(onErr){
             return onErr.data;
          }
    )
}

and then in your angular controller you can get the returned data like this:

fakeDataCenter.getFakeData().then(
    function(data){
        //here in data there is your C# backend service data
    }
);

Return data from service not returning proper data

1 Answers1