Cannot get correct return value from jQuery Ajax call

Question

It is intended to return a JSON object containing a list of image file names. The commented warning shows the correct data, but alert(getPicsInFolder("testfolder")); shows "error" .

 function getPicsInFolder(folder) { return_data = "error"; $.get("getpics.php?folder=" + folder, function (data) { data = jQuery.parseJSON(data); $.each(data, function (index, value) { data[index] = "folders/" + folder + "/" + value; }); //alert(data); // This alert shows the correct data, but that hardly helpful return_data = data; }); return return_data; } 

What am I doing wrong?

Answer 1

You call the asynchronous method $.get() , where the callback function will be called after the getPicsInFolder() function getPicsInFolder() . Follow the comments in the following example:

 function getPicsInFolder(folder) { return_data = "error"; // Since the $.get() method is using the asynchronous XMLHttpRequest, it // will not block execution, and will return immediately after it is called, // without waiting for the server to respond. $.get("getpics.php", function (data) { // The code here will be executed only when the server returns // a response to the "getpics.php" request. This may happen several // milliseconds after $.get() is called. return_data = data; }); // This part will be reached before the server responds to the asynchronous // request above. Therefore the getPicsInFolder() function returns "error". return return_data; } 

You should consider reorganizing the code so that the processing logic of the JSON object is in the $.get() . Example:

 $.get("getpics.php?folder=test", function (data) { // Handle your JSON data in here, or call a helper function that // can handle it: handleMyJSON(data); // your helper function }); 

Answer 2

You receive data asynchronously. The callback function (data) {} is called after getPicsInFolder .

You have two options:

• (unsuccessful option): set synchronous for your ajax call.

• (correct option): rebuild your code so that something happens in the callback that should happen with the returned data.

One way to do this is to pass the callback to getPicsInFolder , for example:

 function getPicsInFolder(folder, callback) { return_data = "error"; $.get("getpics.php?folder=" + folder, function (data) { data = jQuery.parseJSON(data); $.each(data, function (index, value) { data[index] = "folders/" + folder + "/" + value; }); callback(data); //pass data into the callback function }); 

Then, when you call your getPicsInFolder, instead:

 pics = getPicsInFolder('foldername'); //do something with pics 

do the following:

 getPicsInFolder('foldername', function (pics) { //do something with pics }); 

Answer 3

AJAX requests should be asynchronous (you can do synchronous by stopping execution and actually block your user interface).

getPicsInFolder() returned before the AJAX request completes. You need to update the UI / handle the JSON object returned in the full event (an anonymous function that you pass as an argument to $.get() ):

 $.get("", function () { // This anonymous function will execute once the request has been completed // Update your UI/handle your data here }); 

Let's say I wanted to update an item in my user interface ...

 $("#ID-of-a-button-in-the-UI").click(function () // executes on click { $.get("url-to-JSON-object", function (json) // executes on request complete { $("#ID-of-element-to-update").html(json.rows[0].key); // updates UI }); }); 

Answer 4

You are confused about how AJAX works. Data is not available until the request completes, which happens after the function returns. And the data is only available in the callback.