jQuery - .ajax makes the function fail

Question

I have a function which returns data:

function getData(){
   return {result:[{},{},{}...]};
}

This function worked perfectly. Now I want to generate the data dynamically. I use the following method to generate the data, however it does not work out then:

function getData(){
   $.ajax({
      //...
      async: false,
      success: function(data, textStatus, jqXHR){
         return {result:[{},{},{}...]}; 
      }
   });
}

Can some provide me some hints for this or point me to the right direction to do it? thank you.

Joseph Silber · Answer 1 · 2013-09-16T03:29:51.400

4

You have to return the data from your outer function:

function getData () {

   var data;

   $.ajax({
      //...
      async: false,
      success: function(data, textStatus, jqXHR){
         data = {result:[{},{},{}...]}; 
      }
   });

   return data;
}

However, you shouldn't be using synchronous AJAX requests. That'll freeze all execution until the request has completed.

Instead, return the promise returned by the $.ajax call, and use that in your calling code:

function getData () {
   return $.get('/path/to/recourse');
}

getData().then(function (results) {
    // use results here...
});

edited Sep 16 '13 at 03:29

answered Sep 16 '13 at 03:24

Joseph Silber

214,931
59
362
292

um... did you vote to close as a duplicate? There are only two votes so far including mine. – John Dvorak Sep 16 '13 at 03:31
@JanDvorak - That's not a duplicate. The question you linked to was using an asynchronous request. Similar, but not a duplicate. The code in that question *would* work if it were synchronous. – Joseph Silber Sep 16 '13 at 03:32
What do you mean by that? The point of duplicates is to point to a single correct answer. Questions are duplicates if they show the same misunderstanding, not if they use the same code. – John Dvorak Sep 16 '13 at 03:34
@JanDvorak - But they *don't* show the same misunderstanding. That other OP understands that you can't return from the inner function. This OP is under the assumption that returning from within the `success` handler would somehow return the data to the outer function's caller. – Joseph Silber Sep 16 '13 at 03:35
this is the same misunderstanding - both fail to recognise the asynchrhonicity of AJAX. They only differ in how they attempt (and fail) to solve the issue. – John Dvorak Sep 16 '13 at 03:37
Would it be the same question if the canonical duplicate (yes, it's a canonical duplicate - not just an ordinary question) included this kind of attempt in the question body? Definitely. Is it sensible to expect this would be one of the things that the the OOP tried? IMO, yes. If not, then the misunderstanding is how functions work - and you don't target that. – John Dvorak Sep 16 '13 at 03:40

score 3 · Answer 2 · edited May 23 '17 at 12:05

Never DO this(using async : false), it will block the browser thread till the response comes from the server which will freeze the user experience till the response comes back.

you are only returning from the inner function, not from getData

function getData(){
   var result;
   $.ajax({
      //...
      async: false,
      success: function(data, textStatus, jqXHR){
         result = {result:[{},{},{}...]}; 
      }
   });
   return result
}

Then how to do it correctly... There are literally thousands of threads regarding this in SO itself... A famous one is How to return the response from an AJAX call

jQuery - .ajax makes the function fail

2 Answers2