在 JavaScript 中访问多个 JSON 文件

Question

我有一些精灵表，其中 atlus 以 JSON 格式保存。我正在根据structure from 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 代表 JavaScript Object Notation，因此与如果它是一个 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));
})

Answer 3

您可以通过结合使用 Promise 和 XMLHttpRequest 来并行加载多个 JSON 文件。

这个有趣的article from HTML5Rocks 应该对您的下载控制和优化也有很大帮助，因为它全面而实用。

例如，使用get(url) 函数（来自上面的文章，参见下面的源代码）将 JSON 对象作为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
    } )

get(url) 的来源：

这是来自 HTML5Rocks 的示例代码。它在Promise 中封装了一个 XMLHttpRequest 异步调用：

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