detailCode detailCode - 3 months ago 16
Javascript Question

Javascript function AJAX call returns undefined

When the AJAX call is made, the onsuccess doesn't return back the string builder data, but undefined instead.

var MyApp = window.MyApp || {};

MyApp.Data = function() {
var temp = 'Test',
ShowMethod = function() {
$.ajax({
url: "some url",
type: "GET",
headers: {
"accept": "application/json; odata=verbose"
},
success: ShowMethodSucceeded,
error: FailedMethod
});
},
ShowMethodSucceeded = function(data) {
var results = data.d.results;
if(results.length > 0) {
temp = '';
for(var i = 0; i < results.length; i++) {
temp += 'string builder stuff';
}
} else {
alert('no records');
}
return temp;
},
FailedMethod = function() {
alert('error');
};
return {
Show: ShowMethod
};
}();

$(document).ready(function() {
$('#divResults').append(MyApp.Data.Show());
});


Also, here are a couple of different versions of the code do not reap the correct result.

MyApp.Data = function() {
var temp = 'Test',
ShowMethod = function() {
$.ajax({
url: "some url",
type: "GET",
headers: {
"accept": "application/json; odata=verbose"
},
success: ShowMethodSucceeded,
error: FailedMethod
});
},
return temp;
// returns 'Test' instead of the string builder

MyApp.Data = function() {
var temp = 'Test',
ShowMethod = function() {
$.ajax({
url: "some url",
type: "GET",
headers: {
"accept": "application/json; odata=verbose"
},
success: function(data) { temp = data; },
error: FailedMethod
});
},
return temp;
// returns 'Test' instead of the JSON from data


How do I return the data from the success function of the AJAX call?

By the time the AJAX call is made, the function is finished executing and the return variable is not populated yet. The UI is being built dynamically, and I want to use the string builder function to return the string to append the functions that dynamically builds the UI.

Thank you in advance.

Answer

I think you'll need to plumb a callback throughout, like so:

MyApp.Data = function() {
    var temp = 'Test',
    ShowMethod = function(cb) { // added cb
        $.ajax({
            url: "some url",
            type: "GET",
            headers: {
                "accept": "application/json; odata=verbose"
            },
            success: function (data) {
                ShowMethodSucceeded(data, cb); // pass cb through
            },
            error: FailedMethod
        });
    },
    ShowMethodSucceeded = function(data, cb) { // added cb
        var results = data.d.results;
        if(results.length > 0) {
            temp = '';
            for(var i = 0; i < results.length; i++) {
               temp += 'string builder stuff';
            }
        } else {
            alert('no records');
        }
        cb(temp); // call cb with the result
    },
    FailedMethod = function() {
        alert('error');
    };
    return {
        Show: ShowMethod
    };
}();

$(document).ready(function() {
    MyApp.Data.Show(function (result) { // pass a callback
        $('#divResults').append(result); // use the result
    });
});
Comments