How to save the $.getJSON returned value in JQuery

Question

Hi,

i am doing an application which make use of JQuery and Cakephp .

In this i am using like the following to retrieve the values from my controller side

var getformid;
$.getJSON("http://localhost/FormBuilder/index.php/forms/getFormEntry", function(json) {
  getformid=json.forms[0]["id"];
  alert("Form id inside "+getformid);
});//json 

alert("Form id ouside "+getformid);

In the above code, the inner alert that is inside $.getJSON gives me the correct value as 75 But the outer alert showing me the error as getformid not defined..Why so??Can't we make use of the getformid available outside $.getJSON .Please suggest me.SInce i want to make use of that value for saving the Field ..

Edit: IF i try to use the code like

var getformid;    
$.getJSON("http://localhost/FormBuilder/index.php/forms/getFormEntry", myCallback);

function myCallback (json) {
  getformid = json.forms[0]["id"];

  // You can work with the response here
}

i am getting the error like myCallback not defined.WHy so?? Also shall i use getformid value outside the function myCallback()

Answer 1

You have to wait until $.getJSON returns the value before before you start using it. So if you do:

var test;
$.getJSON('url', function(data) {
    test = data;
});

alert(test); // you will get undefined here

This will alert undefined because JS doesn't wait for $.getJSON to finish getting the data (AJAX is by definition asynchronous) and alert will be called when test has not yet been initialized.

What you probably should do is to wrap your 'outer' code in some function and invoke that function from $.getJSON callback.

var test;
$.getJSON('url', function(data) {
    test = data;
    showAlert(); // this call will display actual value
});

function showAlert() {
    alert(test);
}

Answer 2

The getJSON callback is executed asynchronously when the request ends, you should work with the value in the callback, if you don't like having the callback function inside the getJSON call, you can declare a function and handle your logic there:

$.getJSON("http://localhost/FormBuilder/index.php/forms/getFormEntry", myCallback);

function myCallback (json) {
  var formId = json.forms[0]["id"];
  // You can work with the response here
}

Answer 3

As others have stated $.getJSON call is asynchronous, and hasn't finished in time for the outside alert. If you want it to be synchronous you could do

var getformid;
$.ajax({
async: true,
url: "http://localhost/FormBuilder/index.php/forms/getFormEntry",
dataType: "json",
success:  function(json) {
        getformid=json.forms[0]["id"];
        alert("Form id inside "+getformid);
        }
     });//json 

alert("Form id ouside "+getformid);

but usually it's a bad idea. I might do it during a logon script, where I don't want the user to continue until I get a response from a server, but usually I would do all the real work asynchronously in the callback function.