I'm trying to return the ajax success array from one function to another. For some reason I don't seem to be able to pass the data stored in a variable in the success part of the ajax function into the parent function to return.

I looked at this post to try and figure things out, but not such luck: jQuery Ajax call - Set variable value on success

Thanks so much for any assistance.

Here's a simplified version of the code:

// make json_to_return global
var json_to_return;

function loop_through_data(){

  // call the load_days function and put its array data into days_array
  var days_data = load_days(03,2010);

  // I'd like to be able to iterate through days_data here
  //
  //
}

function load_days(selectedMonth, selectedYear){  
                  $.ajax({
                   type: "POST",
                   dataType: "json",
                   url: "../includes/get_availability.php",
                   data: "month=" + selectedMonth + "&year=" + selectedYear,
                   success: function(available_json){
                       json_to_return = available_json;
                   },
                   error: function(msg){
                    alert("error " + msg);
                   }
                 });
               return json_to_return;

}   

I'm trying to return the ajax success array from one function to another. For some reason I don't seem to be able to pass the data stored in a variable in the success part of the ajax function into the parent function to return.

I looked at this post to try and figure things out, but not such luck: jQuery Ajax call - Set variable value on success

Thanks so much for any assistance.

Here's a simplified version of the code:

// make json_to_return global
var json_to_return;

function loop_through_data(){

  // call the load_days function and put its array data into days_array
  var days_data = load_days(03,2010);

  // I'd like to be able to iterate through days_data here
  //
  //
}

function load_days(selectedMonth, selectedYear){  
                  $.ajax({
                   type: "POST",
                   dataType: "json",
                   url: "../includes/get_availability.php",
                   data: "month=" + selectedMonth + "&year=" + selectedYear,
                   success: function(available_json){
                       json_to_return = available_json;
                   },
                   error: function(msg){
                    alert("error " + msg);
                   }
                 });
               return json_to_return;

}   

• javascript
• ajax
• json
• variables
• scope

Share Improve this question Follow edited May 23, 2017 at 11:48 CommunityBot 111 silver badge asked Apr 1, 2010 at 21:31 salonMonsterssalonMonsters 1,28733 gold badges1818 silver badges2727 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

This part of your function happens later:

success: function(available_json){
                   json_to_return = available_json;
               }

So the variable you're returning is undefined, because the code to set it doesn't happen until the response es back from the server. Either call the rest of the code to run from your success function, so it'll run when the data's ready, or set async:false (less desirable because it locks the browser).

The async: false method is like this:

              $.ajax({
               type: "POST",
               async: false,
               dataType: "json",
               url: "../includes/get_availability.php",
               data: "month=" + selectedMonth + "&year=" + selectedYear,
               success: function(available_json){
                   json_to_return = available_json;
               },
               error: function(msg){
                alert("error " + msg);
               }
             });

The better approach:

              $.ajax({
               type: "POST",
               dataType: "json",
               url: "../includes/get_availability.php",
               data: "month=" + selectedMonth + "&year=" + selectedYear,
               success: function(available_json){
                   loopThroughTheDaysAndDoStuff(available_json);
               },
               error: function(msg){
                alert("error " + msg);
               }
             });

$.ajax is an asynchronous function.

It means that when called, the function keeps executing.

In your code provided var days_data = load_days(03,2010); this happens:

• Start an ajax call (asynchronous, function keeps executing)
• return json_to_return (undefined)
• days_data == undefined
• ajax call finishes, json_to_return gets assigned (this can happen in any timespan)

You should rethink your logic, and start coding around the asynchronousity of the ajax call.

A first approach might be passing a function (callback) to load_days which should be called AFTER the success of the ajax call.