このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

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における実用的なデモをお送りしようかと思いましたが、

色々と公開できなかったり、できたりとありまして、今回は控えさせて頂きます。大変申し訳ありません。。

近いうちにまた、別の形で公開出来ればと思います。