JSONデータの利用

仕事でJSONデータを扱うことがあったのですが、仕様が単純で導入が簡単だったのでその時のメモになります。

例えば以下のようなデータがあったとして

果物	リンゴ
	みかん
	バナナ

野菜	レタス
	きゅうり
	トマト

JSONで記述すると

{
    "fruit" : { "name" : "果物", "list" : ["リンゴ", "みかん", "バナナ"] },
    "vegetable" : { "name" : "野菜", "list" : ["レタス", "きゅうり", "トマト"] }
}

上記のJSONデータをJavaScriptから利用する際は、以下のような感じになります。

var data = {
    "fruit" : { "name" : "果物", "list" : ["リンゴ", "みかん", "バナナ"] },
    "vegetable" : { "name" : "野菜", "list" : ["レタス", "きゅうり", "トマト"] }
};

alert(data.fruit.name);			// 果物
alert(data.fruit.list[0]);		// リンゴ
alert(data.fruit.list[1]);		// みかん
alert(data.fruit.list[2]);		// バナナ

alert(data.vegetable.name);		// 野菜
alert(data.vegetable.list[0]);		// レタス
alert(data.vegetable.list[1]);		// きゅうり
alert(data.vegetable.list[2]);		// トマト

Webストレージ（sessionStorage、localStorage）にJSONデータを保存する場合、JSONデータを文字列に変換しないといけいないので「JSON.stringify()」で変換します。

var data = {
    "fruit" : { "name" : "果物", "list" : ["リンゴ", "みかん", "バナナ"] },
    "vegetable" : { "name" : "野菜", "list" : ["レタス", "きゅうり", "トマト"] }
};

sessionStorage.setItem("test", JSON.stringify(data));
localStorage.setItem("test", JSON.stringify(data));

保存したデータをJSONとして利用する場合は、Webストレージから取り出した文字列を「JSON.parse()」でJSON形式に変換します。

var data1 = JSON.parse(sessionStorage.getItem("test"));
var data2 = JSON.parse(localStorage.getItem("test"));

alert(data1.fruit.name);
alert(data2.fruit.name);

サーバからのレスポンスをJSON形式で返す場合、大抵の場合は使用する言語やフレームワークで変換処理をサポートしているので利用が簡単です。

• JSON について - JavaScriptプログラミング講座