Get a legitimate array from ajax & jquery call

Question

I create a simple ajax call, which retrieves data from my database with json, something like:

$.ajax({
    type: "..",
    url: "..",
    data: ..,
    success:function(data){
        var arrayData = jQuery.parseJSON(data);
    }
});

Then I get an array to arrayData, but how can I use it out of the 'success function'?

Answer 1

You have to declare the arrayData var before the ajax call.

var arrayData;

$.ajax({
    type: "..",
    url: "..",
    data: ..,
    success:function(data){
        arrayData = jQuery.parseJSON(data);
    }
});

I recommend you read some on variable scope in javascript.

• What is the scope of variables in JavaScript?
• https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Core_Language_Features#Variable_Scope
• http://www.google.com/search?q=javascript+variable+scope

Answer 2

simshaun has answered your immediate question but I suspect that you may also have questions around the asynchronous nature of the AJAX call i.e. arrayData will be undefined until the response is retruned from the server and the success function is called.

Whatever you want to do with arrayData after the success function is called will need to be called from within the success function. For example

var arrayData;

$.ajax({
    type: "..",
    url: "..",
    data: ..,
    success:function(data){
        arrayData = jQuery.parseJSON(data);
        doSomethingElse();
    }
});

function doSomethingElse() {
    /* do something else here with arrayData */
    arrayData.doSomething();
}

Now at this point, we can actually remove arrayData altogether

$.ajax({
    type: "..",
    url: "..",
    data: ..,
    success:function(data){
        doSomethingElse(jQuery.parseJSON(data));
    }
});

function doSomethingElse(data) {
    /* do something else here with the returned data */
    data.doSomething();
}

In fact, we can go even further. All the anonymous function that is assigned to the success property is really doing is calling doSomethingElse so we could get rid of that and just call doSomethingElse directly

$.ajax({
    type: "..",
    url: "..",
    data: ..,
    success: doSomethingElse
});

function doSomethingElse(data) {
    /* do something else here with the returned data */
    var arrayData = jQuery.parseJSON(data);

}

Is this cleaner/clearer?

Answer 3

var arrayData;
$.ajax({
    type: "..",
    url: "..",
    data: ..,
    success:function(data){
        arrayData = jQuery.parseJSON(data);
    }
});

Answer 4

I used:

$.getJSON("sections/view_numbers_update.php?JsonUpdatedFrom=" + intLastUpdate, function(data) {
 $.each(data, function(index, objNumber) {
  $('#tr_' + objNumber.intID).find("td").eq(3).html(objNumber.datLastCalled);
  $('#tr_' + objNumber.intID).find("td").eq(4).html(objNumber.strStatus);
  $('#tr_' + objNumber.intID).find("td").eq(5).html(objNumber.intDuration);
  $('#tr_' + objNumber.intID).find("td").eq(6).html(objNumber.blnWasHuman);
 });
});

(For a table with <tr id="tr_<?php echo $arrRecord["intID"] ?>"> etc.)

Answer 5

As the other two answers indicate you have to declare the array outside the success function. The reason for this is because the function(){ creates an inner scope.