Access json data outside of $.getJSON()

Question

$(document).ready(function () {
    var value = getParmsVals()["search"];
    $.getJSON('/api/search/GetQuestionByKey/' + value, function (jsonData) {
        $(jsonData).each(function (i, item) {
            var name = getAuthorName(item.userId);
        });
    });
});

function getAuthorName(userId) {
    var fullname = "default";
    $.getJSON('/api/search/GetUserById/' + userId, function (jsonData) {
        fullname = jsonData.firstname + " " + jsonData.lastname;
    });
    return fullname;
}

I'm trying to access the fullname variable by calling the getAuthorName method but I couldn't get the correct value. It's always giving me the value "default".

possible duplicate of [How to return the response from an AJAX call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) — Blazemonger, Jan 03 '14 at 22:17
`$.getJSON` is asynchronous. You are returning `fullname` before `$.getJSON` has received a response. — crush, Jan 03 '14 at 22:18

score 9 · Accepted Answer · answered Jan 03 '14 at 22:19

9

You wouldn't return from an async method, as you can see, it doesn't work! What you need is a callback function, consider:

function getAuthorName(userId, callback) {
    var fullname = "default";
    $.getJSON('/api/search/GetUserById/' + userId, function (jsonData) {
        fullname = jsonData.firstname + " " + jsonData.lastname;
        callback(fullname);
    });
}

Notice how we pass in callback and then call it at the end of your get call? Now call this method like so:

getAuthorName(userID, function(name) {
    console.log(name);
});

And now you have access to fullname in that callback function!

answered Jan 03 '14 at 22:19

tymeJV

103,943
14
161
157

Couldn't he set `async: false` as well? I like your answer better either way though. – Durandal Jan 03 '14 at 22:21
2

@MagicMan -- Setting async to false is never a good idea, if that service is down, that call hangs, locking up the user. Users hate that! – tymeJV Jan 03 '14 at 22:21
@MagicMan you should never set async:false there is always a better way to do it. – SlaterCodes Jan 03 '14 at 22:22
1

@b1tsh1ft unless your'e in onbeforeunload, or an anchor tag click that you don't want to prevent, or a form submit that you don't want to prevent. there are plenty of use cases where it's not a bad idea to use it, this just isn't one of them. – Kevin B Jan 03 '14 at 22:23
@tymeJV thanks for your answer.. So if I have to use $.getJSON() method more than once is there a better way to call it? Other than calling it in different functions?? – Roy Justin Jan 03 '14 at 23:07
you can do: $.ajax({ async: false }); // do the $.getJSON normally $.ajax({ async: true }); – ejgza Apr 20 '22 at 05:06

score 0 · Answer 2 · answered Jan 03 '14 at 22:25

I like the answer by @tymeJV it is an easy solve to the problem

I just wanted to point out that solving the big picture of having easily accessible data inside Javascript is a great reason why data-centric JS frameworks exist

http://knockoutjs.com/ http://backbonejs.org/ http://angularjs.org/

score 0 · Answer 3 · answered Jun 09 '14 at 12:24

0

You can also put your variable on the object and use .bind(), like so:

this.fullname = "default";

$.getJSON('/api/search/GetUserById/' + userId, function (jsonData) {
   this.fullname = jsonData.firstname + " " + jsonData.lastname;
}.bind(this));

answered Jun 09 '14 at 12:24

Svilen

2,608
24
26

Access json data outside of $.getJSON()

3 Answers3

Linked