在JavaScript中访问多个JSON文件

时间:2013-08-16 01:10:09

标签: javascript json

我有一些精灵表,其中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文件。

因为每个sprite表都有自己的JSON文件,所以我要加载大量文件。

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

3 个答案:

答案 0 :(得分:12)

首先,回答你的问题:

  

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

JSON代表 J ava S crpt O bject N otation,因此与如何相同如果它是一个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();

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

答案 1 :(得分:7)

您可以使用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));
})

答案 2 :(得分:2)

您可以使用PromiseXMLHttpRequest的组合来实现并行加载多个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
    } )

获取(网址)的来源:

以下是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()
  } )
}