Returning the Result of a $.getJSON-Function

Question

I need to load a php-script with ajax, which creates a JSON-result. An example of the getEvent.php is:

[{"id":"1","start":"Wed Jul 18 12:00:00 GMT+0200 2012","end":"Wed Jul 18 13:30:00 GMT+0200 2012","title":"leer"}]

In order to transmit this result to another function, I have to be able to assign it to an variable. I tried it many ways, but it has never worked out.

function loadEvents(){
   var cdata;

   $.getJSON({
     type: 'GET',
     url: 'getEvent.php',
     asynch:false,
     contentType: 'application/json; charset=utf-8',
     dataType: 'json',

     success: function(jsonData) {
        cdata = jsonData;
     },
     error: function() {
       alert('');
     }

   });
   return cdata;
 }

cdata = jsonData; doesnt seem to work

I have only found ways to asign parts of the result (jsonData) to a variable, but it seems that the entire jsonData can't be returned.

Can anybody help me with my problem? I have to return the complete jsonData to another function...

Thanks

You've misspelled `async` as `asynch`. And, since you're passing a `settings` object, you should be using [`$.ajax`](http://api.jquery.com/jQuery.ajax/) rather than [`$.getJSON`](http://api.jquery.com/jQuery.getJSON/) that expects a `url`. — Jonathan Lonowski, Jul 27 '12 at 09:00

Christoph · Accepted Answer · 2012-07-27T09:57:47.323

getJSON is an asynchronous function (expectiong just a url, no settings object (Docu)), meaning that it will return a result as soon as the answer from the server is done. In the meantime your function continues execution. Thus, at the moment you return cdata, your success function hasn't executed yet. You need to either use a callback or set the function to be synchronous (which you are trying to do but have a typo in there - it's async without h - also if you want to pass additional settings, you can't use getJSON() but have to use $.ajax().

instead of making the call synchronous, using the callback is probably the better solution:

instead of

 success: function(jsonData) {
    cdata = jsonData;
 },

write:

 success: function(jsonData) {
    workWithResult(jsonData);
 },

 // this is called the "callback" function, it is executed when the ajax-request
 // returned successfully
 function workWithResult(data){
     // now you can work with the data, which is guaranteed to exist
 }

Thank you for your answer. It helped me understand this issue and solved it aswell! =) — user1557029, Jul 27 '12 at 09:54

AdityaParab · Answer 2 · 2012-07-27T09:36:33.773

First thing, why are you using getJSON? $.ajax seems to suit more to your requirement.

Second, The moment you return the cdata comes before the server responds. Your success handler will be executed once the server responds. In the current case, you won't be getting the data you are looking for. :)

What you can do to get around with this is to make the variable cdata global. And just assign the value to cdata in success handler (which you have done already)

PS : Making variables global is not a good programming practice. (Or at least I don't recommend making use of global variables)

Post your specific requirement, like in what way you are going to use the returned value. So that we can see how we can avoid that global beast.

for eg:

success: function(result){
yourTargetFunction(result); // call the target function with returned data as a paramenter to it
}

Returning the Result of a $.getJSON-Function

2 Answers2