javascript jquery ajax return object on success

Question

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

Ioannis Karadimas · Accepted Answer · 2011-11-21 14:58:54Z

6

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 () { ... });

edited Nov 21, 2011 at 14:58

answered Nov 21, 2011 at 14:11

Ioannis Karadimas

7,9263 gold badges38 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user1231231412 Over a year ago

Since my 1st method doesn't have a return statement, nothing gets returned. Adding the return statement in the success method doesn't work either. If I add a return in front of the $.ajax call I get the jhqr object which has the responseText property but not sure how safe it is to do that since it may not have returned yet.

user1231231412 Over a year ago

Sorry. I completely misunderstood your point at first. I understand that you can't return from an async call. So, is there a way to pass a value type by reference so I don't have to put my logic in that call?

Ioannis Karadimas Over a year ago

You don't need to put your logic there. If you check my reply you'll see that I invoke another function inside the callback to handle my data, after unwrapping it. As an aside, technically all object parameters are passed by reference in Javascript.

user1231231412 Over a year ago

Thanks for the example and this does make perfect sense. However I need to post a new question on how to pass a value-type by reference in javascript since the logic I wan't to happen is to simply get the data.d object out of the success method and pass it to other methods possibly. Thanks for the quick help!

aziz punjani · Accepted Answer · 2011-11-21 15:09:06Z

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

Collectives™ on Stack Overflow

javascript jquery ajax return object on success

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related