JavaScript JSON Ajax JSON.parseとevel関数 スマートフォンUI例
2013.04.07
この記事は最終更新日から1年以上が経過しています。
JSONとは、「JavaScript Object Notation」の略で「ジェイソン」といいます。 JSON は、数値や文字列や配列やオブジェクトなどのデータを、文字列で表現できる軽量なフォーマットであり、XMLと比べると簡潔に構造化されたデータを記述することができるため、人間が理解しやすいデータフォーマットであり、JavaScriptのオブジェクトと文字列の相互変換が柔軟にあつかえます。
それでは早速記述してみましょう。
JSONデータを変換
var str = '{ "ary":[0,1,2], "obj": { "a":0,"b":1,"c":2 } }',
obj = JSON.parse(str);
console.log(obj.ary);
console.log(obj.obj);
コンソールで確認してみると、
このようにObjectとして変換させているのが確認出来るかと思います。。
JSON.parse()はJSONフォーマットで作成されている文字列データをオブジェクトに変換してくれるメソッドとなります。
JSON.parse();
以前では、JSON.parse()意外にeval()等が用いられていましたが、こちらはセキュリティ上の問題が在るため、使用はしないほうが良いでしょう。
evalは悪魔と覚えていて何ら問題はかと思います。仮に上記の例ですと、
eval("obj = " + str);
でオブジェクトに変換できますが、使用はしないでください。
逆にオブジェクトからJSONフォーマットに変換する際は、
JSON.stringify();
で、JSONフォーマットに変換することが可能です。
var obj = { ary:[0,1,2], obj:{ a:0, b:1, c:2 } };
var str = JSON.stringify(obj);
console.log(str);
コンソールで確認すると変換できているのが確認できます。
また、JSONデータは厳格な部分もあり、文字列はダブルコーテーション「”」で囲わないとエラーが発生しますのでご注意を。
JSON + Ajax
Ajaxとは、簡単に説明しますと、XMLHttpRequest()でオブジェクトを生成し、非同期通信を行う手法です。
詳しくはこちらでもご参照の程を。
JavaScript Ajax XMLHttpRequest
では、XMLHttpRequest オブジェクトを作成しましょう。
今回はIEなどの対応は行いません。
httpObj = new XMLHttpRequest();
オブジェクトの方をコンソールで確認してみます。
console.log(httpObj);
IE 7以前のIEブラウザ以外のブラウザだと作成出来ているかと思います。
XMLHttpRequest オブジェクトが保持する、onloadメソッドとopenメソッドとresponseTextプロパティを使い、JSONデータを受け取りましょう。
では、JSONデータを用意。
test.json
{"item":[
{
"itemCode":100,
"itemName":"ミカン",
"itemPrice":80
},
{
"itemCode":101,
"itemName":"リンゴ",
"itemPrice":100
},
{
"itemCode":102,
"itemName":"ぶどう",
"itemPrice":200
}]
}
httpObj = new XMLHttpRequest();
httpObj.open("get", "./test.json", true);
httpObj.onload = function() {
var myData = JSON.parse(this.responseText),
txt = "";
for (var i=0, il = myData.item.length; i < il; i++) {
txt = txt + myData.item[i].itemName + "：" + myData.item[i].itemPrice+"円<br>";
}
document.getElementById("result").innerHTML = txt;
}
httpObj.send(null);
onloadメソッドで読み込んだ際に関数を実行しております。
先ほどのJSON.parseでmyDataオブジェクトを生成。
変数txtにそれらのデータをデータの文格納して表示させております。
ブラウザ表示
スマートフォンデモ
スマートフォンUIとして、スライドで「シャー」と切り替え、JSONで受け取ったデータを表示させるスマートフォンUIにおける実用的なデモをお送りしようかと思いましたが、
色々と公開できなかったり、できたりとありまして、今回は控えさせて頂きます。大変申し訳ありません。。
近いうちにまた、別の形で公開出来ればと思います。
