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 — Felix Kling
– Felix Kling, Commented Jan 11, 2012 at 21:10

jAndy · Accepted Answer · 2012-01-11 21:16:40Z

8

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

answered Jan 11, 2012 at 21:16

jAndy

237k57 gold badges313 silver badges363 bronze badges

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

Comments

Quentin · Accepted Answer · 2012-01-11 21:09:47Z

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, 2012 at 21:09

Quentin

948k136 gold badges1.3k silver badges1.4k bronze badges

Comments

Gazler · Accepted Answer · 2012-01-11 21:09:57Z

2

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

answered Jan 11, 2012 at 21:09

Gazler

84.4k18 gold badges284 silver badges245 bronze badges

Comments

gen_Eric · Accepted Answer · 2012-01-11 21:08:55Z

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, 2012 at 21:08

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

Comments

bububaba · Accepted Answer · 2012-01-11 21:11:54Z

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, 2012 at 21:11

bububaba

2,8706 gold badges27 silver badges29 bronze badges

3 Comments

gen_Eric Over a year ago

async: false makes the entire browser lock up until the AJAX call is done.

bububaba Over a year ago

Umm. Yes. If that's what the OP wants..?

gen_Eric Over a year ago

I meant that's a bad thing, as user may think their browsers have crashed.

Collectives™ on Stack Overflow

How to return json object in javascript function?

5 Answers 5

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related