我有一些精灵表,其中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库。
答案 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)
您可以使用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
} )
获取(网址)的来源:
以下是HTML5Rocks的示例代码。它在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()
} )
}