jiichan.com

PROGRAMMING

javascript
CSS
PHP
Java

AjaxでJSON形式のデータを扱う

JSON形式のデータは、XML形式よりタグが無い分サイズも小さく、又、XML形式で必要なDOM操作も無く、 単純な処理で読み込みや書き出しができます。
javascriptはもとより、さまざまな言語間でのデータの受け渡しに使えるので便利です。
JSONのデータ形式や参照方法を勉強してみます。

JSONのデータ形式

JSONで使えるデータ型は数値・文字列・真偽値・配列・オブジェクト（連想配列）などです。
カンマで区切られたデータの集合を、配列は大カッコ[]で、オブジェクトは中カッコ｛｝で囲みます。 キーは必ず文字列になります。つまりダブルクォーテーションで囲む必要があります。 

配列
["田中", "佐藤", "鈴木"]
オブジェクト
{"name":"田中", "age":25, "sex":"男"}
両方の組み合わせ
[{"name":"田中", "age":25, "sex":"男"},
{"name":"佐藤", "age":42, "sex":"男"},
{"name":"鈴木", "age":32, "sex":"女"}]

配列やオブジェクトは何段階にも入れ子にできます。

JSONのデータを参照する場合は、配列のインデックス番号やキー名をドット（.）でつないでそのデータを参照 することになります。 

var game = 
[
  {
   "team":"A",
   "member":[
            {"name":"田中", "age":25, "sex":"男"},
            {"name":"佐藤", "age":42, "sex":"男"},
            {"name":"鈴木", "age":32, "sex":"女"}
           ]
  },
  {
   "team":"B",
   "member":[
            {"name":"山本", "age":40, "sex":"女"},
            {"name":"伊藤", "age":35, "sex":"男"},
            {"name":"山田", "age":28, "sex":"女"}
           ]
  }
]

この例では、game[1].member[2].nameで山田（さん）を参照できます。 配列名gameの2番目の、オブジェクトのキー名がmemberである配列の3番目の、オブジェクトのキー名がnameであるものを参照しています。

JSON形式のデータをテキストファイルにするときは

JSONデータの使用は、PHPとAjaxを使ってのやり取りの場合が多く、ファイルで保存することは少ないと思います。
もし、JSONのデータをテキストファイルで保存する場合は、Ajaxで使われる文字コードと同じUTF8にします。
前記で変数gameに格納したデータをファイルとして保存するときは、変数部分を除いた配列データのみを ファイルにすることになります。ファイル名をgame.txtとしたものが以下になります。 

[
  {
   "team":"A",
   "member":[
            {"name":"田中", "age":25, "sex":"男"},
            {"name":"佐藤", "age":42, "sex":"男"},
            {"name":"鈴木", "age":32, "sex":"女"}
           ]
  },
  {
   "team":"B",
   "member":[
            {"name":"山本", "age":40, "sex":"女"},
            {"name":"伊藤", "age":35, "sex":"男"},
            {"name":"山田", "age":28, "sex":"女"}
           ]
  }
]

JSON形式のデータを読み込む(Ajax)

JSON形式のデータを読み込むためにAjax(XMLHttpRequest)を利用します。 

var req = new XMLHttpRequest();
req.open('GET', "game.txt", true);
req.onreadystatechange = function(){
	if((req.readyState == 4) && (req.status == 200)){
		// 返却されたテキストをjavascriptのオブジェクトに変換
		var data= JSON.parse(req.responseText);
		// 結果を表示するエリアを取得
		var disp = document.getElementById("disp");
		// dataを見やすいように加工する
		var htmlStr = "";
		for(var i in data){
			var team = data[i].team;
			var member = data[i].member;
			htmlStr += "チーム" + team + "<br>";
			for(var key in member){
				htmlStr += member[key].name + "：" + 
						  member[key].age + "歳：" + 
						  member[key].sex + "<br>";
			}
		}
		// 結果を表示
		disp.innerHTML = htmlStr;
	}
};
req.send("");


チームA
田中：25歳：男
佐藤：42歳：男
鈴木：32歳：女
チームB
山本：40歳：女
伊藤：35歳：男
山田：28歳：女

6行目の「返却されたテキストをjavascriptのオブジェクトに変換するコード」を 

var data= JSON.parse(req.responseText);

としていますが、最初は次のように書いていました。
ただ、eval関数は「本来のJSON形式でなくとも解釈できてしまうため，安全とはいえない」ので データが信頼できる場合のみ使用したほうが良いみたいです。 

var data= eval("("+req.responseText+")");

JSON形式のデータを読み込む(jQueryのAjax)

jQueryのAjaxも試してみます。$.getJSONを使います。 

$.getJSON("game.txt", {}, function(json){
	var htmlStr = "";
	$.each(json, function(i, obj){
		var team = obj.team;
		var member = obj.member;
		htmlStr += "チーム" + team + "<br>";
		$.each(member, function(j, value){
				htmlStr += value.name + "：" + 
						  value.age + "歳：" + 
						  value.sex + "<br>";
		});
	});
	$("#disp").html(htmlStr);
});

jquery利用ですので、ループではforやfor…inを使わずにあえて$.eachにしました。
結果は上のXMLHttpRequest利用のものと同じです。