JSONデータの読み込み

このプロジェクトで、JSON データを二つの方法で読み込む方法を紹介します。一つ目はプロジェクト内のアセットから直接、二つ目はリモートサーバーから HTTP で読み込みます。

アセットから JSON を読み込む

Game.attributes.add('characterData',{
type:'asset',
assetType:'json'
});

//...

Game.prototype.parseCharacterData=function(data){
var names =[];

// JSON アセットからキャラクターデータを読み取り名前のリストを返す
var characters = data.characters;
for(var i =0; i < characters.length; i++){
var character = characters[i];
 names.push(character.firstName+' '+ character.lastName);
}

return names;
};

//...

// プロジェクトアセットから JSON データを取得
var characterData =this.characterData.resource;

// JSON データをパース
var names =this.parseCharacterData(characterData);

上記のコードでは、プロジェクト内のアセットから JSON データを読み込むために、スクリプト属性のtypeを 'asset' にするか asset registry からアセットを取得し、resource プロパティにアクセスすれば良いことがわかります。json のアセットに対して resource をアクセスすることで、JSON データは既に Javascript オブジェクトにパースされていることに注目してください。

Javascript オブジェクトを取得したら、通常通りデータにアクセスすることができます。例えば、parseCharacterData メソッドでプロパティをループすることができます。

リモートサーバーから JSON を読み込む

Game.prototype.loadJsonFromRemote=function(url, callback){
var xhr =newXMLHttpRequest();
 xhr.addEventListener("load",function(){
callback(JSON.parse(this.response));
});
 xhr.open("GET", url);
 xhr.send();
};

//...

// リモートサーバーから JSON を取得
this.loadJsonFromRemote("https://api.github.com/",function(data){
// リモートサーバーからの JSON データを表示
 el =document.querySelector("#xhr-json");
 el.textContent=JSON.stringify(data,null,4);
});

このコードでは、XMLHttpRequestオブジェクト(標準のWebブラウザAPIの一部)を使用して、URLからJSONデータをリクエストしています。この場合、GitHub APIを使用しています。

"load"イベントを受け取った後、JSON.parseを使用してJSONデータを解析します(これも標準のWebブラウザAPIの一部です)。そして、データをcallback関数を介して返します。

loadJsonFromRemote の呼び出しは、非同期であることに注意してください。

以下は完全なコードリストです。

varGame= pc.createScript('game');

Game.attributes.add('display',{
type:'asset',
assetType:'html'
});

Game.attributes.add('style',{
type:'asset',
assetType:'css'
});

// JSON 形式のキャラクターデータをドラッグアンドドロップ可能にするための Script Attribute を作成する
Game.attributes.add('characterData',{
type:'asset',
assetType:'json'
});

// エンティティごとに一度だけ呼ばれる初期化コード
Game.prototype.initialize=function(){
this.initDisplay();

var el;

// プロジェクトアセットから JSON データを取得
var characterData =this.characterData.resource;

// JSON データをパース
var names =this.parseCharacterData(characterData);

// キャラクターの名前を表示
 el =document.querySelector("#character-name");
 el.textContent= names.join(", ");

// JSON アセットから JSON データを表示
 el =document.querySelector("#asset-json");
 el.textContent=JSON.stringify(characterData,null,4);

// リモートサーバーから JSON データを取得
this.loadJsonFromRemote("https://api.github.com/",function(data){
// リモートサーバーからの JSON データを表示
 el =document.querySelector("#xhr-json");
 el.textContent=JSON.stringify(data,null,4);
});
};

Game.prototype.initDisplay=function(){
var el = pc.createStyle(this.style.resource);
document.head.appendChild(el);

var div =document.createElement("div");
 div.setAttribute("id","container");
 div.innerHTML=this.display.resource;
document.body.appendChild(div);
};

Game.prototype.parseCharacterData=function(data){
var names =[];

// JSON アセットからキャラクターデータを読み取り名前のリストを返す
var characters = data.characters;
for(var i =0; i < characters.length; i++){
var character = characters[i];
 names.push(character.firstName+' '+ character.lastName);
}

return names;
};

Game.prototype.loadJsonFromRemote=function(url, callback){
var xhr =newXMLHttpRequest();
 xhr.addEventListener("load",function(){
callback(JSON.parse(this.response));
});
 xhr.open("GET", url);
 xhr.send();
};

このプロジェクトからお試しください。

アセットから JSON を読み込む​

リモートサーバーから JSON を読み込む​

アセットから JSON を読み込む

リモートサーバーから JSON を読み込む