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

Share Follow edited Jun 9, 2014 at 11:09 Prophet 33.4k2828 gold badges5858 silver badges9090 bronze badges asked Jun 9, 2014 at 11:04 p1xelarchitectp1xelarchitect 29911 gold badge77 silver badges1919 bronze badges 2

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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.