libro
www.tuyano.com
Google App Engine for Java(GAE/J)プログラミング入門

複数モデルを連携処理する (5/6)

作成:2010-05-07 17:09
更新:2010-05-10 17:40

■index.htmlを修正する

では、データを表示するindex.htmlを修正して、LinkDataと、関連するMsgDataがうまく表示されるようにしてみましょう。

ここでは、例によって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となっているわけですね。

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

*program list*
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!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>
※関連コンテンツ

「Google App Engine for Java(GAE/J)プログラミング入門」に戻る