Accessing multiple JSON files in JavaScript

Question

I have some sprite sheets with the atlus saved in a JSON format. I'm structuring my atlus based upon the structure from BrowserQuest. Each of their JSON files looks like:

{
    "id": "agent",
    "width": 24,
    "height": 24,
    "animations": {
        "idle_down": {
            "length": 2,
            "row": 0
        }
    },
    "offset_x": -4,
    "offset_y": -8
}

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

Since each JSON file is an object literal, the only way I could imagine accessing it is to save the object literal to a variable, such as

var agent = {
    "id": "agent",
    "width": 24,
    "height": 24,
    "animations": {
        "idle_down": {
            "length": 2,
            "row": 0
        }
    },
    "offset_x": -4,
    "offset_y": -8
};

I'm hoping there is an easy way to access JSON files.

And because each individual sprite sheet has its own JSON file, I have a large number of files to load.

What is the best way to load such a high number of JSON files? I'm trying to avoid using any JS libraries.

Answer 1

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.

Answer 2

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));
})