Load multiple JSON files in pure JavaScript

Question

I am new to javaScript. I have already understood how to create object from JSON-file with JSON.Parse() and now I need to load multiple local JSONs into array. I've been googling my problem for a while, but everything that I found was related to single file. Is there any way to do this in pure JS without any libraries like jQuery and etc.?

P.S.: There is no need to work with web-server or else, the code is running locally.

Answer 1

You can do something like this:

var file1 = JSON.parse(file1);
var file2 = JSON.parse(file2);
var file3 = JSON.parse(file3);
var myFileArray = [file1, file2, file3];
// Do other stuff
// ....
// Add another file to the array
var file4 = JSON.parse(file4);
myFileArray.push(file4);

If you already have an array of un-parsed files you could do this:

var myFileArray = [];
for(var i=0; i<unparsedFileArray.length; i++){
    myFileArray.push(JON.parse(unparsedFileArray[i]));
}

Answer 2

The following pseudo-code snippet might help you -

var myArray = [];
for(... loop through your files ...) {
    myArray.push(JSON.parse(your_file);
}

Answer 3

To do this, you need to first get the actual files. Then, you should parse them.

// we need a function to load files
// done is a "callback" function
// so you call it once you're finished and pass whatever you want
// in this case, we're passing the `responseText` of the XML request
var loadFile = function (filePath, done) {
    var xhr = new XMLHTTPRequest();
    xhr.onload = function () { return done(this.responseText) }
    xhr.open("GET", filePath, true);
    xhr.send();
}
// paths to all of your files
var myFiles = [ "file1", "file2", "file3" ];
// where you want to store the data
var jsonData = [];
// loop through each file
myFiles.forEach(function (file, i) {
    // and call loadFile
    // note how a function is passed as the second parameter
    // that's the callback function
    loadFile(file, function (responseText) {
        // we set jsonData[i] to the parse data since the requests
        // will not necessarily come in order
        // so we can't use JSONdata.push(JSON.parse(responseText));
        // if the order doesn't matter, you can use push
        jsonData[i] = JSON.parse(responseText);
        // or you could choose not to store it in an array.
        // whatever you decide to do with it, it is available as
        // responseText within this scope (unparsed!)
    }
})

If you can't make an XML Request, you can also use a file reader object:

var loadLocalFile = function (filePath, done) {
    var fr = new FileReader();
    fr.onload = function () { return done(this.result); }
    fr.readAsText(filePath);
}