How can I return a variable from a $.getJSON function

Question

I want to return StudentId to use elsewhere outside of the scope of the $.getJSON()

j.getJSON(url, data, function(result)
{
    var studentId = result.Something;
});

//use studentId here

I would imagine this has to do with scoping, but it doesn't seem to work the same way c# does

score 67 · Answer 1 · 2012-02-25T20:38:21.977

67

it doesn't seem to work the same way c# does

To accomplish scoping similar to C#, disable async operations and set dataType to json:

var mydata = [];
$.ajax({
  url: 'data.php',
  async: false,
  dataType: 'json',
  success: function (json) {
    mydata = json.whatever;
  }
});

alert(mydata); // has value of json.whatever

edited Feb 25 '12 at 20:38

answered Jun 17 '09 at 18:28

3

This is a much better solution, as getJSON is an async call, so the variable set in the delegate is not accessible before the async call is finished. – Annagram Nov 12 '09 at 22:05
Interestingly enough I had "&callback=?" in my URL which seemed to override the async:false setting. – Dead account Apr 08 '10 at 11:44
1

Been searching everywhere - none of the above answers work for me, but this one does! – reectrix Aug 04 '16 at 20:21

score 41 · Accepted Answer · answered Aug 27 '08 at 20:19

Yeah, my previous answer does not work because I didn't pay any attention to your code. :)

The problem is that the anonymous function is a callback function - i.e. getJSON is an async operation that will return at some indeterminate point in time, so even if the scope of the variable were outside of that anonymous function (i.e. a closure), it would not have the value you would think it should:

var studentId = null;
j.getJSON(url, data, function(result)
{
    studentId = result.Something;
});

// studentId is still null right here, because this line 
// executes before the line that sets its value to result.Something

Any code that you want to execute with the value of studentId set by the getJSON call needs to happen either within that callback function or after the callback executes.

score 25 · Answer 3 · answered Mar 23 '13 at 09:07

25

Even simpler than all the above. As explained earlier $.getJSON executes async which causes the problem. Instead of refactoring all your code to the $.ajax method just insert the following in the top of your main .js file to disable the async behaviour:

 $.ajaxSetup({
   async: false
 });

good luck!

answered Mar 23 '13 at 09:07

bicycle

8,315
9
52
72

2

this is must be the top answer – Mostafa King Sep 10 '14 at 14:59
Agree with @MostafaKing – DanMad Feb 09 '18 at 10:19
This is by far the best answer. Thank you @bicycle. – Daniel Kilburn Mar 09 '18 at 14:26
Note that this means that your page stops loading until all ajax requests are done. Ajax uses async for a reason: all ajax calls are executed in the background and your page can display the results of each request as soon as it gets in. It makes sense learn how to work with callbacks and use them accordingly. – Thawn May 03 '19 at 12:45

score 2 · Answer 4 · answered Jan 30 '09 at 02:48

If you wish delegate to other functions you can also extend jquery with the $.fn. notation like so:


var this.studentId = null;

$.getJSON(url, data, 
    function(result){
      $.fn.delegateJSONResult(result.Something);
    }
);

$.fn.delegateJSONResult = function(something){
  this.studentId = something;
}

score -1 · Answer 5 · edited Jul 09 '17 at 18:20

-1

var context;
$.ajax({
  url: 'file.json',
  async: false,
  dataType: 'json',
  success: function (json) {   
    assignVariable(json);
  }
});

function assignVariable(data) {
  context = data;
}
alert(context);

edited Jul 09 '17 at 18:20

xlm

6,854
14
53
55

answered Jul 09 '17 at 16:08

Reinaldo Garcia

1
1

1

The question was asked about 9 years ago and your answer is not adding any significant improvement to answers already posted. – MJ Khan Jul 09 '17 at 17:00

travis · Answer 6 · 2008-08-27T21:00:03.200

hmm, if you've serialized an object with the StudentId property then I think that it will be:

var studentId;
function(json) {
    if (json.length > 0)
        studentId = json[0].StudentId;
}

But if you're just returning the StudentId itself maybe it's:

var studentId;
function(json) {
    if (json.length > 0)
        studentId = json[0];
}

Edit: Or maybe .length isn't even required (I've only returned generic collections in JSON).

Edit #2, this works, I just tested:

var studentId;
jQuery.getJSON(url, data, function(json) {
    if (json)
        studentId = json;
});

Edit #3, here's the actual JS I used:

$.ajax({
    type: "POST",
    url: pageName + "/GetStudentTest",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    data: "{id: '" + someId + "'}",
    success: function(json) {
        alert(json);
    }
});

And in the aspx.vb:

<System.Web.Services.WebMethod()> _
<System.Web.Script.Services.ScriptMethod()> _
Public Shared Function GetStudentTest(ByVal id As String) As Integer
    Return 42
End Function

How can I return a variable from a $.getJSON function

6 Answers6

Linked