Javascript function AJAX call returns undefined

Question

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.

You have to return temp in onsucess method – AB Udhay Aug 21 '16 at 18:57 — AB Udhay, Aug 21 '16 at 18:57

score 2 · Accepted Answer · answered Aug 21 '16 at 18:57

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
    });
});

That worked perfectly!! I spent hours trying to figure this out. Thank you for taking the time to explain it in plain English! — detailCode, Aug 21 '16 at 19:15

Javascript function AJAX call returns undefined

1 Answers1