How to return json object in javascript function?

Question

I've this function

function getTags(level){
    $.getJSON("php/get-tags.php", { "parent": level }, function(json) {
        return json;
    });
}

I'm calling this function as

$(function(){
    var tags = getTags('0');  
});

The problems is, in the function getTags() the return json is like

{"tags":["Mathematics","Science","Arts","Engineering","Law","Design"]}

but at var tags = getTags('0'), catching the return value, it gets an undefined value.

Is the way I'm returning the value incorrect?

possible duplicate of [JavaScript asynchronous return value / assignment with jQuery](http://stackoverflow.com/questions/7779697/javascript-asynchronous-return-value-assignment-with-jquery) — Felix Kling, Jan 11 '12 at 21:10

score 8 · Accepted Answer · answered Jan 11 '12 at 21:16

Like many others already correctly described, the ajax request runs asynchronous by default. So you need to deal with it in a proper way. What you can do, is to return the jXHR object which is also composed with jQuery promise maker. That could looke like

function getTags(level){
    return $.getJSON("php/get-tags.php", { "parent": level });
}

and then deal with it like

$(function(){
    getTags('0').done(function(json) {
        // do something with json
    });
});

score 2 · Answer 2 · answered Jan 11 '12 at 21:09

2

getJSON is asynchronous, the function that called it will have finished by the time the HTTP response gets back and triggers the callback.

You cannot return from it.

Use the callback to do whatever you want to do with the data.

answered Jan 11 '12 at 21:09

Quentin

914,110
126
1,211
1,335

score 2 · Answer 3 · answered Jan 11 '12 at 21:09

You are trying to call an asynchronous function in a synchronous fashion.

When you call getTags, the it triggers a call to your PHP page, if javascript was blocking, then your page would hang until your server responded with the JSON. You need to re-think your logic and trigger a callback.

function getTags(level){
    $.getJSON("php/get-tags.php", { "parent": level }, function(json) {
        //do something with the JSON here.
    });
}

score 1 · Answer 4 · answered Jan 11 '12 at 21:08

1

You cannot return from an AJAX call. It's asynchronous. You need to have all logic dealing with the returned data in the callback.

answered Jan 11 '12 at 21:08

gen_Eric

223,194
41
299
337

score 1 · Answer 5 · answered Jan 11 '12 at 21:11

1

If you need it to work like that, your getTagsfunction must return a value. It does not at the moment. You could achieve this by using $.ajax and setting async to false.

answered Jan 11 '12 at 21:11

bububaba

2,840
6
25
29

2

`async: false` makes the entire browser lock up until the AJAX call is done. – gen_Eric Jan 11 '12 at 21:23
Umm. Yes. If that's what the OP wants..? – bububaba Jan 11 '12 at 21:25
1

I meant that's a bad thing, as user may think their browsers have crashed. – gen_Eric Jan 11 '12 at 21:33

How to return json object in javascript function?

5 Answers5