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
– SLaks, Commented Feb 8, 2012 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
– stergosz, Commented Feb 8, 2012 at 17:43
Possible duplicate/related: stackoverflow.com/q/31129/497356 — Andrew Whitaker
– Andrew Whitaker, Commented Feb 8, 2012 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
– balexandre, Commented Feb 8, 2012 at 17:48

Fabrizio Calderan · Accepted Answer · 2012-02-08 17:53:00Z

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 8, 2012 at 17:53

answered Feb 8, 2012 at 17:47

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

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

2 Comments

stergosz Over a year ago

but my code is way too much to put it in the function there... is this how it is supposed to work?

Fabrizio Calderan Over a year ago

inside the done() just call another function passing data returned

driangle · Accepted Answer · 2012-02-08 17:43:41Z

1

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

answered Feb 8, 2012 at 17:43

driangle

11.8k6 gold badges50 silver badges56 bronze badges

1 Comment

stergosz Over a year ago

my current javascript code is over 2000 lines of code... do i have to put all the code where you call the function?

balexandre · Accepted Answer · 2012-02-08 17:44:49Z

1

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
}

answered Feb 8, 2012 at 17:44

balexandre

75.4k47 gold badges240 silver badges352 bronze badges

Collectives™ on Stack Overflow

How to use jQuery ajax data to variable

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related