back
複数モデルを連携処理する (5/6)
■index.htmlを修正する
では、データを表示するindex.htmlを修正して、LinkDataと、関連するMsgDataがうまく表示されるようにしてみましょう。
ここでは、例によってcallback関数で、LinkDataの一覧か、または指定されたIDのLinkDataと、それに関連するMsgDataが表示されるようにしています。ここでは、特定IDのデータを表示するところでは、
ここでは、例によってcallback関数で、LinkDataの一覧か、または指定されたIDのLinkDataと、それに関連するMsgDataが表示されるようにしています。ここでは、特定IDのデータを表示するところでは、
for (var i = 0;i < json[0].messages.length;i++){
res += '<tr><td>' + json[0].messages[i].comment + '</td></tr>';
}このようにJSONデータのmessagesの値を繰り返しで表示しています。このmessagesは配列になっており、そこから値を取り出して、commentプロパティを表示しています。このmessagesが、LinkDataに保管されているList内のMsgDataとなっているわけですね。(by. SYODA-Tuyano.)
※リストが表示されない場合
AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>データの表示</title>
<script type="text/javascript" src="lib.js"></script>
<script type="text/javascript">
<!--
function callback(request){
var json = eval(request.responseText);
var res = '';
if (json.length == 1){
res += '<tr><td>' + json[0].id +'</td></tr>';
res += '<tr><td>' + json[0].title +'</td></tr>';
res += '<tr><td>' + json[0].url +'</td></tr>';
res += '<tr><td>' + json[0].comment +'</td>';
res += '</tr><tr><td><table><tr><th>Message</th></tr>';
for (var i = 0;i < json[0].messages.length;i++){
res += '<tr><td>' + json[0].messages[i].comment + '</td></tr>';
}
res += '</table></td></tr>';
} else {
for (var i = 0;i < json.length;i++){
res += '<tr><td><a href="javascript:return false;" onclick="getData(' +
json[i].id +');">' + json[i].id + '</a></td>';
res += '<td><a href="' + json[i].url + '">' + json[i].title + '</a></td>' +
'<td><a href="edit.html?id=' + json[i].id + '">Edit</td>' +
'<td><a href="del.html?id=' + json[i].id + '">Delete</td>' +
'<td><a href="addmsg.html?id=' + json[i].id + '">Message</td></tr>';
}
}
var obj = document.getElementById("datatable");
obj.innerHTML = res;
}
//-->
</script>
</head>
<body onload="getData(null);">
<h1>データの表示</h1>
<table id="datatable" border="1">
<tr>
<td>wait...</td>
</tr>
</table>
<br>
<div><a href="add.html">データの新規追加</a></div>
</body>
</html>
| << 前へ | 次へ >> |