javascript object/variable issue

Question

I have below code in angular service

this.get = function(url,qParams)
{
    var webresponse = new Object();

    $http.get(url+qParams)
    .success(function(result){
        webresponse.data = result;
        webresponse.state = 1;          
    })
    .error(function(result){
        webresponse.data = result;
        webresponse.state = 0;      
    });

    console.log('webresponse :' + webresponse.data);
    return webresponse;
}

In console log shows webresponse.data as undefined. Please help me to understand why. Is it scope issue?

just to let you know result is JSON array and in console log it shows JSON array as expected with all elements in it.

this is an asynchronous call, the function `get()` not wait until the result come — Azad, Nov 28 '15 at 17:27
http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call — Saad, Nov 28 '15 at 17:28
Thanks for that clear and concise explanation of the issue. Appreciate it. — Sherebyah Tishbi, Nov 28 '15 at 17:37

score 1 · Answer 1 · edited Nov 28 '15 at 17:32

1

Your $http.get() is an async call and your console.log is in synchronous fashion, so console.log initiated first then your $http.

edited Nov 28 '15 at 17:32

Marco Bonelli

63,369
21
118
128

answered Nov 28 '15 at 17:26

swapnesh

26,318
22
94
126

@MarcoBonelli sync fashion means that we are generally use to it (keeping it in a lighter note) in programming means line by line execution and waiting, on the other hand `async` don't wait for a result though generally maintained on event cycles – swapnesh Nov 28 '15 at 17:32
1

Thanks for that Sync/Async difference of $http promise in angular. Probably in knew it and still missed it. This is what happens when you work 14 hours a day...!!!! :) – Sherebyah Tishbi Nov 28 '15 at 17:38
@SherebyahTishbi your blocking code is breaking your synchronous life cycle :) – swapnesh Nov 28 '15 at 17:41

score 1 · Answer 2 · answered Nov 28 '15 at 17:36

Method calls in $http are asynchronous: The result will not be necessarily available after the function .get() returns. Please check again the docs for $http.

Data in webresponse will not be available (i.e. your variable is not set yet to anything other than the plain object) but only when the $http.get request fetches the data from the server. Such moments are the .success trigger, the .error trigger, and also a trigger you did not use (and perhaps don't need) called .finally (works regardless whether .success and .error have been triggered).

You cannot access the webresponse outside those callbacks since they are the only guaranteed moments where such values will be available. Even more! You cannot RETURN such value from the function. Since the behavior is asynchronous you will have to return something in the same asynchronous way. Please check the $q service to learn how to do it. It is a long topic and you lack the basics on this topic so I will give you some guidelines:

$http is an asynchronous service. Their calls (e.g. .get() return something called a promise. Your function should return a promise (either the same or other).
The actual result itself (i.e. the result you want) will not be available as you intend: The function's invoker must attend the promise you return, specify a callback for it, and attend it in the callback.
More information: You need a deeper knowledge of $http and $q services. They are pretty well documented in the official docs.

score 0 · Answer 3 · answered Nov 28 '15 at 17:31

you function is an synchronous call.

this.get = function(url,qParams)
{
    var webresponse = new Object();

    $http.get(url+qParams)
    .success(function(result){
        webresponse.data = result;
        webresponse.state = 1;          

        console.log('webresponse :' + webresponse.data);
        //triger any function @here when its success 
    })
    .error(function(result){
        webresponse.data = result;
        webresponse.state = 0;   


        console.log('webresponse :' + webresponse.data);
        //triger any function @here when its fail 

    });    
}

Aww.....how i missed that whole aspect `promise` in angular. Thank you so much friend. — Sherebyah Tishbi, Nov 28 '15 at 17:36

score 0 · Answer 4 · answered Nov 28 '15 at 17:37

Your this.get() function can't return result immediately.

As you know, the $http module use ajax, (AJAX: Asynchronous Javascript and Xml )

so you have to wait for the asynchronous response in your success or error callback function.

If you want to return the response, please consider promise pattern.

javascript object/variable issue

4 Answers4