在JavaScript中访问多个JSON文件

Question

我有一些精灵表,其中atlus以JSON格式保存.我正在根据BrowserQuest的结构构建我的atlus.他们的每个JSON文件如下所示:

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

但我想知道,如果它只是一个原始对象文字,我如何访问每个JSON文件中的数据？

由于每个JSON文件都是一个对象文字,我能想象访问它的唯一方法是将对象文字保存到变量中,例如

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

我希望有一种简单的方法来访问JSON文件.

并且因为每个单独的精灵表都有自己的JSON文件,所以我要加载大量文件.

加载如此多的JSON文件的最佳方法是什么？我试图避免使用任何JS库.

Answer 1

首先,回答你的问题:

但我想知道,如果它只是一个原始对象文字,我如何访问每个JSON文件中的数据？

JSON代表Ĵ AVA 小号 CRIPT ö bject Ñ浮选,因此是相同的如何,如果它是一个JavaScript对象会被操纵.

至于访问JSON文件(如果它是本地文件),您可以使用:

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

然后你可以doStuff用任何处理JSON的函数替换.

Answer 2

您可以使用XMLHttpObject.

看一看

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

像这样使用这个功能

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