How to use jQuery ajax data to variable

Question

I have the following javascript code:

function initSite(){
    var site;
    $.getJSON(www+'init/initSite', function(data) { site = data; });
}
$(document).ready(function(){
    var site = initSite();
        console.log(site);
}

which returns undefined... how can i store the json object that i recieve in the site variable so i can use it later?

EDIT: This seem to work but im not sure if its correct to use this solution

var site = null;
$.ajax({
  url: www+"init/initSite",
  async: false,
  dataType: 'json',
  success: function (data) {
    site = data;
  }
});
console.log(site);

Welcome to the wonderful world of **async**! You can't do that. — SLaks, Feb 08 '12 at 17:41
then how the heck am i supposed to use the isloggedin variable that i get from the ajax query in javascript to limit user actions if he's not logged in.. — stergosz, Feb 08 '12 at 17:43
Possible duplicate/related: http://stackoverflow.com/q/31129/497356 — Andrew Whitaker, Feb 08 '12 at 17:47
there's no **heck**, it's a simple miss concept. You can initialize everything from the result call, no need to initialize **only** when the DOM is ready... see the answers. — balexandre, Feb 08 '12 at 17:48
what if i use $.ajax({}) with async:false? This seem to work... is there any problems that can come up with this solution? — stergosz, Feb 09 '12 at 06:38

score 1 · Answer 1 · answered Feb 08 '12 at 17:43

1

function initSite(onSuccess){
    $.getJSON(www+'init/initSite', onSuccess);
}
$(document).ready(function(){
   initSite(function(data){
       var site = data;
       // initialize your code.
   });
}

answered Feb 08 '12 at 17:43

driangle

11,601
5
47
54

my current javascript code is over 2000 lines of code... do i have to put all the code where you call the function? – stergosz Feb 08 '12 at 17:48

score 1 · Answer 2 · answered Feb 08 '12 at 17:44

The problem is just a miss concept:

getJSON is an async call, and the site = data; will only happen way after the DOM is ready.

in order for you to make everything work the way it should, your initialization needs to start from your async call result and never before, for example:

// no need to wait for DOM ready to call `initSite`
initSite();

function initSite() {
    $.getJSON(www+'init/initSite', function(data) {  
        initialization(data);
    });
}
function initialization(site) {
    // initialize all the things that need to be done
    console.log(site);
}

$(document).ready(function(){
    // do other stuff, for example show a loading message/image
}

Fabrizio Calderan · Accepted Answer · 2012-02-08T17:53:00.863

1

of course you got undefined because your function doesn't return anything and the ajax call is also asynchronous, so you have to wait the server response. Since $.ajax (and shortcuts) returns a promise you can do this task using deferred

function initSite(){
    return $.getJSON(www+'init/initSite');
}
$(document).ready(function(){
    $.when(initSite()).done(function(data) {
        /* continue here the code execution, e.g. call another function */

        doAllTheRemainingWorkWith(data)

    });
}

as you can see this code is short and easy to read

edited Feb 08 '12 at 17:53

answered Feb 08 '12 at 17:47

Fabrizio Calderan

120,726
26
164
177

but my code is way too much to put it in the function there... is this how it is supposed to work? – stergosz Feb 08 '12 at 17:50
inside the `done()` just call another function passing data returned – Fabrizio Calderan Feb 08 '12 at 17:51

How to use jQuery ajax data to variable

3 Answers3