■お題
・データベースで検索したレコードをJSON形式で渡したり、
JSPを使って、Javascriptにおける”ある変数”の初期値としたり
するために、
データベースのレコードの形を、JSONで表現したい
ということがある。今日は、この形について
■問題へのアプローチ
表現方法として３つを考える。
（１）CSV形式のように、値だけを、行列の形で渡す
例：テストの点、学生番号、氏名、点数の順（４人分）
"1","name1","98"
"2","name2","80"
"3","name3","67"
"4","name4","32"
（２）キーと値の組の連想配列（Javaだとハッシュマップ）があって
（＝レコードになっている）、それが配列になっている
例：テストの点（４人分）
（３）上記（１）の配列（または（２）のレコードの配列）が
ある変数（例えばdataとか）の中に入っている
■基本的な規則
JSON 構文
http://memopad.bitter.jp/w3c/json/json_syntax.html
にあるように、
・配列は、[]（大括弧、角括弧）でくくる
・ハッシュマップ、連想配列のように
key=valueの場合は
key:value
・オブジェクトは{}（中括弧）でくくる
・Javascriptでは、連想配列のキーをオブジェクトの属性として表現できる
data.attr1→data["attr1"]と同じ
■具体例
（１）CSV形式のように、値だけを、行列の形で渡す
var myarray=
[
["1","name1","98"],
["2","name2","80"],
["3","name3","67"],
["4","name4","32"]
];
[]の中に、１レコード分の[]がある
（２）キーと値の組の連想配列（Javaだとハッシュマップ）があって
（＝レコードになっている）、それが配列になっている
var myrec=
[
{"no":"1","name":"name1","score":"98"},
{"no":"2","name":"name2","score":"80"},
{"no":"3","name":"name3","score":"67"},
{"no":"4","name":"name4","score":"32"}
];
[]の中に、レコードとして{}でくくったものがあり、
このレコードがKey:Valueの形になっている
（３）上記（１）の配列（または（２）のレコードの配列）が
ある変数（例えばdataとか）の中に入っている
var mydata=
{data:[
["1","name1","98"],
["2","name2","80"],
["3","name3","67"],
["4","name4","32"]
]};
全体はオブジェクトなので{}でくくり、その中の要素dataの値が
２重[]→（１）と同じものになっている。
■サンプル
各データ表現したものが、表になって現れる
なお、サンプルは
・Javascriptでは、連想配列のキーをオブジェクトの属性として表現できる
を示すため、わざと、
myrec[i].score
mydata["data"][i][1]
と表現している。もちろんこれらは、
myrec[i]['score']
mydata.data[i][1]
と書いてもよい。
■サンプルの様子
「連想配列の配列」をクリックしたところ
■全力で注意点！！！
配列の要素
４つあるとき、１から３番目は,で区切る
例：["1","name1","98"],
けど、４番目の最後の要素に,はいれない！！
["4","name4","32"]
入れると、私のIEではエラーになり表示されない
・データベースで検索したレコードをJSON形式で渡したり、
JSPを使って、Javascriptにおける”ある変数”の初期値としたり
するために、
データベースのレコードの形を、JSONで表現したい
ということがある。今日は、この形について
■問題へのアプローチ
表現方法として３つを考える。
（１）CSV形式のように、値だけを、行列の形で渡す
例：テストの点、学生番号、氏名、点数の順（４人分）
"1","name1","98"
"2","name2","80"
"3","name3","67"
"4","name4","32"
（２）キーと値の組の連想配列（Javaだとハッシュマップ）があって
（＝レコードになっている）、それが配列になっている
例：テストの点（４人分）
| 学生番号(no) | 氏名(name) | 点数(score) |
|---|---|---|
| 1 | name1 | 98 |
| 2 | name2 | 80 |
| 3 | name3 | 67 |
| 4 | name4 | 32 |
（３）上記（１）の配列（または（２）のレコードの配列）が
ある変数（例えばdataとか）の中に入っている
■基本的な規則
JSON 構文
http://memopad.bitter.jp/w3c/json/json_syntax.html
にあるように、
・配列は、[]（大括弧、角括弧）でくくる
・ハッシュマップ、連想配列のように
key=valueの場合は
key:value
・オブジェクトは{}（中括弧）でくくる
・Javascriptでは、連想配列のキーをオブジェクトの属性として表現できる
data.attr1→data["attr1"]と同じ
■具体例
（１）CSV形式のように、値だけを、行列の形で渡す
var myarray=
[
["1","name1","98"],
["2","name2","80"],
["3","name3","67"],
["4","name4","32"]
];
[]の中に、１レコード分の[]がある
（２）キーと値の組の連想配列（Javaだとハッシュマップ）があって
（＝レコードになっている）、それが配列になっている
var myrec=
[
{"no":"1","name":"name1","score":"98"},
{"no":"2","name":"name2","score":"80"},
{"no":"3","name":"name3","score":"67"},
{"no":"4","name":"name4","score":"32"}
];
[]の中に、レコードとして{}でくくったものがあり、
このレコードがKey:Valueの形になっている
（３）上記（１）の配列（または（２）のレコードの配列）が
ある変数（例えばdataとか）の中に入っている
var mydata=
{data:[
["1","name1","98"],
["2","name2","80"],
["3","name3","67"],
["4","name4","32"]
]};
全体はオブジェクトなので{}でくくり、その中の要素dataの値が
２重[]→（１）と同じものになっている。
■サンプル
各データ表現したものが、表になって現れる
<HTML>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"
type="text/javascript"></script>
<script>
var myarray=
[
["1","name1","98"],
["2","name2","80"],
["3","name3","67"],
["4","name4","32"]
];
var myrec=
[
{"no":"1","name":"name1","score":"98"},
{"no":"2","name":"name2","score":"80"},
{"no":"3","name":"name3","score":"67"},
{"no":"4","name":"name4","score":"32"}
];
var mydata=
{data:[
["1","name1","98"],
["2","name2","80"],
["3","name3","67"],
["4","name4","32"]
]};
$(function(){
// ボタン１：配列の場合
$("#mybutton1").click(function(){
buf = "<table border=1>";
for(i = 0 ; i < myarray.length;i++)
{
buf=buf + "<tr>";
buf=buf + "<td>"+myarray[i][0]+"</td>";
buf=buf + "<td>"+myarray[i][1]+"</td>";
buf=buf + "<td>"+myarray[i][2]+"</td>";
buf=buf + "</tr>";
}
buf = buf+"</table>";
$("#mytable").html(buf);
});
// ボタン２：連想配列の配列
$("#mybutton2").click(function(){
buf = "<table border=1 style='color:red'>";
for(i = 0 ; i < myrec.length;i++)
{
buf=buf + "<tr>";
buf=buf + "<td>"+myrec[i]['no']+"</td>";
buf=buf + "<td>"+myrec[i]['name']+"</td>";
buf=buf + "<td>"+myrec[i].score +"</td>";
buf=buf + "</tr>";
}
buf = buf+"</table>";
$("#mytable").html(buf);
});
// ボタン３：変数の中に入っている
$("#mybutton3").click(function(){
buf = "<table border=1 style='color:blue'>";
for(i = 0 ; i < mydata.data.length;i++)
{
buf=buf + "<tr>";
buf=buf + "<td>"+mydata.data[i][0]+"</td>";
buf=buf + "<td>"+mydata["data"][i][1]+"</td>";
buf=buf + "<td>"+mydata.data[i][2]+"</td>";
buf=buf + "</tr>";
}
buf = buf+"</table>";
$("#mytable").html(buf);
});
});
</script>
<body>
<div id="mytable"></div>
<BUTTON id="mybutton1">配列</BUTTON>
<BUTTON id="mybutton2">連想配列の配列</BUTTON>
<BUTTON id="mybutton3">変数</BUTTON>
</body>
</html>
|
なお、サンプルは
・Javascriptでは、連想配列のキーをオブジェクトの属性として表現できる
を示すため、わざと、
myrec[i].score
mydata["data"][i][1]
と表現している。もちろんこれらは、
myrec[i]['score']
mydata.data[i][1]
と書いてもよい。
■サンプルの様子
「連想配列の配列」をクリックしたところ
■全力で注意点！！！
配列の要素
４つあるとき、１から３番目は,で区切る
例：["1","name1","98"],
けど、４番目の最後の要素に,はいれない！！
["4","name4","32"]
入れると、私のIEではエラーになり表示されない
アクセス
トータル
ランキング
