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?

• Felix Kling: possible duplicate of JavaScript asynchronous return value / assignment with jQuery

Answer 1

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

Answer 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.

Answer 3

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

Answer 4

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

Answer 5

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.

• gen_Eric: async: false makes the entire browser lock up until the AJAX call is done.
• bububaba: Umm. Yes. If that's what the OP wants..?
• gen_Eric: I meant that's a bad thing, as user may think their browsers have crashed.