JSONのデータを表示する

　JSONとはJavaScript Object Notationの略称です。このJSON形式のデータはJavaScriptで式評価が許される（eval()で式評価できる）ものであれば何でも構いません。基本的には以下の形式になります。

{
　"プロパティ名" : 値
}

　このデータを読み込み利用するにはdata = eval("("+データ+")")とすると変数dataにJSONで定義されたプロパティの値が入ります。例えば以下のようなJSONファイルがあるとします。

{
"userID":"ajax",
"userPW":"xanadu"
}

　このデータを変数dataに読み込んだとします。userIDプロパティの値を読み出すにはdata.userIDと記述します。するとajaxの文字が返されます。同様にdata.userPWとするとxanaduの文字が返されます。単純にオブジェクト名.プロパティ名の記述で済みます。プロパティの値には関数なども定義することができます。これによりオブジェクト名.プロパティ名()として末尾にカッコを付加した場合にプロパティの内容＝関数が実行されます。つまりメソッドを定義したのと同じことになります。

　それでは実際のデータを読み込み表示してみます。以下の商品名とそれに関するデータが記述されたJSONデータを読み込み表示します。（実際のサンプルを実行する）

●シンプルなJSONデータ
{
"itemCode":91,
"itemName":"塩ラーメン",
"itemPrice":300
}

●スクリプト
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>JSONのデータを表示する</title>
<script type="text/javascript" src="xmlhttp.js"></script>
<script type="text/javascript"><!--
function loadDataFile(fName)
{
httpObj = createXMLHttpRequest(displayData);
if (httpObj)
{
httpObj.open("GET",fName,true);
httpObj.send(null);
}
}
function displayData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
$("result").innerHTML = parseJSON(httpObj.responseText);
}
}
// JSONのデータを解析して表示
function parseJSON(jsData)
{
var data = eval("("+jsData+")");
var resultData = "["+data.itemCode+"] "+data.itemName+" : "+data.itemPrice +"円";
 return resultData;
}
// --></script>
</head>
<body>
<h1>JSONのデータを表示する</h1>
<p>JSONのデータを読み込み表示します</p>
<form name="ajaxForm">
<input type="button" value="jsondata.txtを読み込み" onClick="loadDataFile('jsondata.txt')"><br>
</form>
<div id="result"></div>
</body>
</html>

　JSONデータは単純なテキストファイルなのでresponseTextで取得する必要があります。取得したデータをeval()で評価し、各プロパティを表示すればできあがりです。
　実際には商品名が１つということはありません。かなり多くの商品リストがあり、項目も多岐に渡るはずです。このような場合には配列を利用してJSONデータとして定義します。これは以下のようになります。

●複数のデータを含むJSONデータ
{"item":[
{"itemCode":91,
"itemName":"塩ラーメン",
"itemPrice":300},

{"itemCode":94,
"itemName":"味噌ラーメン",
"itemPrice":290},

{"itemCode":95,
"itemName":"豚骨ラーメン",
"itemPrice":320}
]
}

　この場合、変数dataにデータが読み込まれた場合、最初のデータ（塩ラーメン）にアクセスするにはdata.item[0].itemCodeのようにします。配列として定義されているので、このように記述することになります。2番目のデータであればdata.item[1].itemCodeとなります。あとは必要に応じてデータの数だけ繰り返せばよいことになります。
　上記のデータを表示するプログラムは以下のようになります。（実際のサンプルを実行する）

●スクリプト
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>JSONのデータを表示する2</title>
<script type="text/javascript" src="xmlhttp.js"></script>
<script type="text/javascript"><!--
function loadDataFile(fName)
{
httpObj = createXMLHttpRequest(displayData);
if (httpObj)
{
httpObj.open("GET",fName,true);
httpObj.send(null);
}
}
function displayData()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
$("result").innerHTML = parseJSON(httpObj.responseText);
}
}
// JSONのデータを解析して表示
function parseJSON(jsData)
{
var data = eval("("+jsData+")");
var resultData = "<table border='1'>";
for(var i=0; i<data.item.length; i++)
{
var iCode = data.item[i].itemCode; // 商品コード
var iName = data.item[i].itemName; // 商品名
var iPrice = data.item[i].itemPrice; // 商品価格
resultData += "<tr><th>"+iCode+"</th><td>"+iName+"</td><td>"+iPrice+"円</td></tr>";
}
 resultData += "</table>";
return resultData;
}
// --></script>
</head>
<body>
<h1>JSONのデータを表示する2</h1>
<p>JSONのデータを読み込み表示します</p>
<form name="ajaxForm">
<input type="button" value="jsondata.txtを読み込み" onClick="loadDataFile('jsondata.txt')"><br>
</form>
<div id="result"></div>
</body>
</html>

　ここまででテキスト、CSV、XML、JSONデータを取り扱い表示するサンプルを見てきました。次項ではテキストデータを読み込み、該当データが存在するかどうかといった簡単なデータベース検索を行ってみます。SQL (MySQLやPostreSQLなど) が扱えるサーバーを利用している方はAjaSQL（高橋登史朗さんのページ）を参照するとSQLと連動してデータ検索を行うことができます。

[第三章　7:簡単なデータベース検索を行うへ]
[目次へ]

(2006.1.7)