JavaScript Undefined with jQuery deferred

Question

I am trying to write an AJAX request using the jQuery .Deferred/.promise. The function gets hit when the page loads and then nothing happens and I can't access my issueData variable. When I run the function it is undefined, but my AJAX call return JSON objects. I'm trying to figure out if the issue is in how I setup the issueData .deferred() and .promise()

function getIssues(issueData) {
    var issueData = new jQuery.Deferred();
    return $.ajax({
        url: 'http://localhost:49650/Issues.svc/GetIssues',
        type: 'GET',
        dataType: 'json',
        success: function(data) {
            issueData = data;
        },
        error: function () {
            alert('Call not resolved')
        }
    });
    return issueData.promise();    
}

Answer 1

You don't need to use jQuery.Deferred() here, $.ajax handles this for you. You just need to return $.ajax({}). Also, since AJAX is asynchronous, your issueData = data; won't do anything useful.

You need to use callbacks to get the returned data.

You can do this:

function getIssues() {
    return $.ajax({
        url: 'http://localhost:49650/Issues.svc/GetIssues',
        type: 'GET',
        dataType: 'json',
        error: function () {
            alert('Call not resolved')
        }
    }); 
}

getIssues().done(function(data){
    // use the returned JSON here
});

Or, you can use the success function:

function getIssues() {
    return $.ajax({
        url: 'http://localhost:49650/Issues.svc/GetIssues',
        type: 'GET',
        dataType: 'json',
        success: function(data){
            // use the returned JSON here
        },
        error: function () {
            alert('Call not resolved')
        }
    }); 
}

getIssues();