I am trying to return a value from a completed jQuery Ajax call. However, instead of the JSON data, I am receiving back "undefined." How can I modify my code to get the JSON data instead of undefined?
function callback(data) {
return data;
}
var xv = jQuery.ajax( {
url: 'http://www.domain.com/json.php',
dataType: 'json',
success: function(data) {
alert('Success.'); // This is alerted.
},
error: function(data) {
alert('File could not be processed.'); // This is not alerted.
},
complete: function(data) {
callback(data);
}
});
console.log(callback()); // Getting "undefined" here instead of data.
You aren't actually storing data
anywhere. All you do is reflect back whatever is given to you, just like Sterling said
I would modify it like so:
var globalData;
function(callback){
globalData = data;
}
Then console.log(globalData)
and you can see the result
AJAX is async by default, you have your data only when you get it, that's in your success callback. Do a sync call, or use your data inside your success function.
Your code should look like this instead:
function doWithJson(data) {
console.log(data);
}
var xv = jQuery.ajax( {
url: 'http://www.domain.com/json.php',
dataType: 'json',
success: function(data) {
doWithJson(data);
},
error: function(data) {
alert('File could not be processed.');
},
complete: function(data) {
/* Remove overlay */
}
});