getJSONでjson形式の配列情報を取得表示する方法



xmlファイルのデータ操作はよくありますが
(過去の記事 AJAXによるXMLファイルの読込み記述例とWEB制作あるある や、
DOMDOCUMENT:XMLファイルデータを読込んで出力するPHP 等)
今回はjson形式のファイルデータを使用したものをやってみたいと思います。

1.CSSの記述例

以下は任意です。

<style type="text/css">
<!--
#idWrap{
	width:800px;
	margin:0 auto;
}
#idJsonClk{
	cursor:pointer;
	margin:auto;
	width:150px;
	text-align:center;
	padding:15px;
	background-color:#666666;
	color:#FFFFFF;
	border:solid 1px #666666;
}
#idJsonClk:hover{
	cursor:pointer;
	margin:auto;
	width:150px;
	text-align:center;
	padding:15px;
	background-color:#FFFFFF;
	color:#000000;
	border:solid 1px #000000;
}
#idJsonArea{
	margin:auto;
	width:300px;
	border:dotted 1px #333333;
	padding:10px;
	line-height:1.2em;
}
p{
	padding:20px;
	font-size:14px;
	text-align:center;
}
-->
</style>

2.json形式のファイル例

(今回はtest.jsonを使用)

[{"id":"01","name":"東京太郎","birthday":"1981/01/20"},{"id":"02","name":"埼玉次郎","birthday":"1982/02/19"},{"id":"03","name":"千葉健太郎","birthday":"1983/03/18"},{"id":"04","name":"神奈川四郎","birthday":"1984/04/17"},{"id":"05","name":"山梨吾郎","birthday":"1985/05/16"},{"id":"06","name":"静岡六郎","birthday":"1986/06/15"},{"id":"07","name":"福岡七郎","birthday":"1987/07/14"}]

3.JavaScriptの記述例

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#idJsonClk").click(function(){

		var str_work="";

		$.getJSON("test.json", function(json){
			for(var i in json){
				//test.jsonファイルから取得した情報を連結
				str_work=str_work+json[i].id+","+json[i].name+","+json[i].birthday+"<br>";
			}
			$("#idJsonArea").html(str_work);
		});

	});
});
</script>

4.HTMLの記述例

<div id="idWrap">
	<h1>以下をクリックするとjson形式のデータ(<a href="test.json" target="_blank">test.json</a>ファイル内)情報を取得表示します。</h1>
    <div id="idJsonClk">ココをクリック</div>
    <br><br>
	<div id="idJsonArea">
		<p>ココに取得したjson形式のデータを表示します。</p>
	</div><!--/idJsonArea-->
</div>

getJSONでjson形式ファイルの配列情報を取得表示するデモページ

xmlファイル形式のものよりjson形式の方が可視性が良いですね。
データ数が多いとxmlより容量も若干抑えられそうですが、
そうなってくるとやはりxmlもそうですが、
データベースの使い所の判断に迷う場面が出てきそうです。