I have a webpage that will load a couple JSON files via XMLHttpRequest.
I want to load the file, parse the JSON and store the output in a globally accessible variable.
Once BOTH foo and bar are plete, only then do I want to call the success() function. So far, my script has 2 problems that I need help with.

1: I'm having trouble setting the variable to the output of loadJSON(). My guess is that my return statements are a little funky? I've tried everything... help?

2: How do I call success() only AFTER BOTH foo and bar are set?

var foo;
var bar;

function initSession(){

    foo = loadJSON("foo.js");
    bar = loadJSON("bar.js");

}

My guess is that the problem lies in how I'm using return in the loadJSON() function:

function loadJSON(url){

    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){  
            return JSON.parse(xhr.responseText);  // doesn't work?
        }
    }

    xhr.open("GET", url, true);
    xhr.send();

    return xhr.onreadystatechange;
}



$(document).ready(function(){
    initSession();
});


function success(){ 
    $("body").append(foo[0]);  
    $("body").append(bar[0]);  
}

Thank you!

I have a webpage that will load a couple JSON files via XMLHttpRequest.
I want to load the file, parse the JSON and store the output in a globally accessible variable.
Once BOTH foo and bar are plete, only then do I want to call the success() function. So far, my script has 2 problems that I need help with.

1: I'm having trouble setting the variable to the output of loadJSON(). My guess is that my return statements are a little funky? I've tried everything... help?

2: How do I call success() only AFTER BOTH foo and bar are set?

var foo;
var bar;

function initSession(){

    foo = loadJSON("foo.js");
    bar = loadJSON("bar.js");

}

My guess is that the problem lies in how I'm using return in the loadJSON() function:

function loadJSON(url){

    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){  
            return JSON.parse(xhr.responseText);  // doesn't work?
        }
    }

    xhr.open("GET", url, true);
    xhr.send();

    return xhr.onreadystatechange;
}



$(document).ready(function(){
    initSession();
});


function success(){ 
    $("body").append(foo[0]);  
    $("body").append(bar[0]);  
}

Thank you!

• javascript
• json

• The return JSON.parse(xhr.responseText) is not working because it's asynchronous and you can assign the result into a global var in that callback function usinf varname = JSON.parse(xhr.responseText) but this may not solve the problem. – The Alpha Commented Jun 9, 2014 at 11:07
• so how can I call success() only after BOTH foo and bar are set? – p1xelarchitect Commented Jun 9, 2014 at 11:11

2 Answers 2

For anyone who discovers this in the future... below was my final solution based on the discussion in the accepted answer. which would easily allow an extension to dynamically set the number of files before the success function is called.

var foo;
var bar;
var count = 0;

function initSession(){

    loadJSON("foo.js", "foo");
    loadJSON("bar.js", "bar");   

}

function loadJSON(url, name){

    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function(){

        if(xhr.readyState == 4 && xhr.status == 200){  
            count++;
            window[name] = JSON.parse(xhr.responseText);;

            if (count == 2){
                success();
            } 
        }
    }

    xhr.open("GET", url, true);
    xhr.send();
}



$(document).ready(function(){
    initSession();
});



function success(){ 
    $("body").append(foo[0].option + "<br>" + bar[0].fname + " " + bar[0].lname);  
}

You may try something like this:

$(document).ready(function(){
    loadJSON("foo.js");
    loadJSON("bar.js");
});

Modify your success function:

function success(data){ 
    $("body").append(data[0]);  
}

Then modify in your success callback/onreadystatechange

if(xhr.readyState == 4 && xhr.status == 200){  
    success(JSON.parse(xhr.responseText));
}

Call the success function from success callback/onreadystatechange function. Also you can pass a callback function to loadJSON function and can call that callback function from the onreadystatechange/success callback, for example:

function loadJSON(url, callback){

    // ...

    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){  
            callback(JSON.parse(xhr.responseText));
        }
    }

    // ...
}

Then you may pass the callback function like this:

loadJSON("foo.js", function(data){
    // do something with data
});

So, you can use different callback functions for different ajax requests.