CODEWITHSUNDEEP
javascriptjqueryajax
user1231231412
user1231231412

Reputation: 1659

javascript jquery ajax return object on success

Here's a simple ajax call wrapped in a method.

MyNS.GetStringList = function (successCallback, failedCallback) {
var methodUrl = serverUrl + "/GetStringList";
$.ajax({
    type: "GET",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    url: methodUrl, // Location of the service
    data: {}, //Data sent to server
    beforeSend: function (XMLHttpRequest) {
        //ensures the results will be returned as JSON.
        XMLHttpRequest.setRequestHeader("Accept", "application/json");
    },
    success: successCallback,
    error: failedCallback
});
}

Here's a method calling the above method.

function GoGetTheStringList() {
        var stringList;
        stringList = MyNS.GetStringList(function (data) { return data.d; }, function (XmlHttpRequest, textStatus, errorThrown) {
            alert("error");
        });

        alert(reasonsDictionary); // THIS IS UNDEFINED!

    }

What's the proper syntax to make the 1st method return the data.d object?

Thanks as always! Jon

Upvotes: 2

Views: 7342

Answers (2)

aziz punjani
aziz punjani

Reputation: 25786

You can use jQuery deffered as it is better suited for this purpose. 

MyNS.GetStringList = function () {
var methodUrl = serverUrl + "/GetStringList";
return $.ajax({                            // return here, this will returns a deffered object
          type: "GET",
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          url: methodUrl, // Location of the service
          data: {} //Data sent to server
       });
}

You shouldn't need to do 

beforeSend: function (XMLHttpRequest) {
            //ensures the results will be returned as JSON.
            XMLHttpRequest.setRequestHeader("Accept", "application/json");
           },

That's what the dataType: 'json' does, it gives jQuery a hint as to what to expect in the response from the server.

Then in your function 

function GoGetTheStringList() {
      var stringList;
      $.when( MyNS.GetStringList() )   
      .done(function( data ){  console.log( data.d );  }); 
      .fail(function( data ) { console.log('Request failed'); });
}

Upvotes: 0

Ioannis Karadimas
Ioannis Karadimas

Reputation: 7906

It can't really. Ajax calls are asynchronous, which means the method will have returned before the success callback is invoked.

EDIT / Correction: You may be able do it, but you will have to set the jQuery ajax async option to false, which means you will be performing a synchronous call, which means your whole app will be waiting for it to return. It's best if you pass a callback to your function to be called when success is invoked.

In response to your edit: Yes, it will be undefined, because it is out of context. What you need to do is process your data from inside the callback, because at that point you will know you have it, and because you can't return data as a result of function A from function B. In your callback you should invoke a function to handle the data you got.

var latestData;
function getStuff(succeeded,failed) {...}
function gotStuff(dataWrapper) {
    latestData = dataWrapper.d;
    doThingsWithStuffData(dataWrapper.d);
}

getStuff(gotStuff, function () { ... });

Upvotes: 6

Related Questions