Accessing multiple JSON files in JavaScript

First, to answer your questions:

But I'm wondering, how do I even access the data in each JSON file, if it just a raw object literal?

JSON stands for JavaScript Object Notation, and as such is identical to how it would be manipulated if it was a JavaScript object.

As for accessing the JSON file if it was a local file, you could use this:

function doStuff(json){
    console.log(json);
}

var oReq = new XMLHttpRequest();
oReq.addEventListener("load", function(){
    doStuff(JSON.parse(this.responseText));
});
oReq.open("GET", "http://www.example.com/example.json");
oReq.send();

And then you can just replace doStuff with whatever function handles the JSON.

You can use XMLHttpObject.

Have a look

function getJSONFile(url,callback) {   
  var req = new XMLHttpRequest();
  req.open('GET', url, true); 
  req.overrideMimeType("application/json");
  req.onreadystatechange = function () {
      if (req.readyState == 4 && req.status == "200") {
        callback(req.responseText);
      }
  };
req.send();  
}

use this function like this

getJSONFile('http://www.example.com/example.json', function(data){
  if(data)
    console.log('json data : ' + JSON.stringify(data));
})

You can acheive that with the combination of Promise and XMLHttpRequest to load multiple JSON files in parallel.

This interesting article from HTML5Rocks should help you a lot for download control and optimization as well, for it is comprehensive and functional.

For example, with the get(url) function (from the article above, see source below) returning a JSON object as a Promise:

var names = [ "agent", "arrow", ... ]
var sprites = {}

var all = []
names.forEach( function ( n ) {
  //Request each individual sprite and get a Promise
  var p = get( n + ".json" )
              .then( JSON.parse ) //parse the JSON file
              .then ( function ( sprite ) {
                 //Record the sprite by name
                 sprites[n] = sprite 
                 //Display your sprite as soon as loaded here     
              } )
  //add the promise to an Array of all promises
  all.push( p )
} )

//wait for all the files to be loaded and parsed
Promise.all( all )
    .then( function () {
        //All the  JS sprites are loaded here
        //You can continue your processing
    } )

Source for get(url):

Here is the sample code from HTML5Rocks. It encapsulates a XMLHttpRequest asynchronous call in a Promise:

function get(url) {
  return new Promise(function(resolve, reject) {
    var req = new XMLHttpRequest()
    req.open( 'GET', url )
    req.onload = function() {
      if ( req.status == 200 ) 
        // Resolve the promise with the response text
        resolve(req.response)
      else
        // Otherwise reject with the status text
        reject( Error( req.statusText ) )
    }

    // Handle network errors
    req.onerror = function() {
      reject( Error( "Network Error" ) )
    }

    // Make the request
    req.send()
  } )
}