pythonで取り出したsqliteのデータをjsonデータに変換、javascriptでwebブラウザに表示。

下記pyスクリプトがサーバー側でsqliteからデータを取り出し、
jsonに変換して、webブラウザ側にソケット通信するようなイメージとなります。

python
1dbname = 'MailList.db'
2conn = sqlite3.connect(dbname, check_same_thread = False)
3cur = conn.cursor()
4cur.execute("CREATE TABLE IF NOT EXISTS items(\
5id INTEGER PRIMARY KEY,\
6sendmail text,\
7subject text,\
8body text,\
9datetime text)")
10
11def receivedMessage(client, server, message):
12    print(message)
13    try:
14        if message == 'メール一覧表示':
15            print(message)
16            
17            cur.execute("SELECT * FROM items")
18                
19            #while True:
20            result=cur.fetchall()
21            #if result is None:
22                #break
23            print(result)
24            print(type(result))
25            #Mail_List1 = str(result)    
26            #print(type(result))
27                #sendmail = result[1] 
28                #subject = result[2] 
29                #body = result[3] 
30                
31                #print(result)
32                #result1 = result[1:3]
33                #result2 = str(result1)
34            #json_data = {"送信先":sendmail, "件名":subject, "本文":body}
35                #print(json_data)
36                #print(type(json_data))
37            Mail_List1 = json.dumps(result, ensure_ascii=False)
38            #print(Mail_List1)
39            #print(type(Mail_List1))
40            server.send_message_to_all(Mail_List1)
41                        
42                #print(sendmail)
43                #server.send_message_to_all(sendmail)
44                #print(subject)
45                #server.send_message_to_all(subject)
46                #print(body)    
47                #server.send_message_to_all(body)         
48                #Mail_List = sendmail+":"+subject+":"+body
49
50                #Mail_List1 = json.dumps(Mail_List)
51                #print(type(Mail_List1))
52                #print(Mail_List1)
53                #server.send_message_to_all(Mail_List1)
54
55    except KeyboardInterrupt:
56        conn.close()
57        GPIO.cleanup()
58
59server = WebsocketServer(9005, host="192.168.43.57")
60server.set_fn_message_received(receivedMessage)
61#server.set_fn_new_client(new_client)
62server.run_forever()

javascript
1<html>
2<head>
3    <script src="http://code.jquery.com/jquery-latest.min.js">
4    </script>
5    <meta charset="UTF-8">
6    <script>
7        $(function(){
8            var ws5 = new WebSocket("ws://192.168.43.57:9005/");
9            $('#btn1').on('click', function () {
10                ws5.send('メール一覧表示');
11            });
12
13            ws5.onmessage = function (message) {  
14                var str = message;
15                
16                //var obj = JSON.parse(str);
17                //var obj = $.parseJSON(str);
18                //var str1 = str.split(')');
19                //$.each(str,function(index,element){
20                    //$('#test').append(index + ':' + element + '<br>');
21                //});     
22
23                $('#test').append(str.data);                        
24                
25            };
26
27        });
28
29    </script>
30    <style>
31        #test{
32            height:200px; 
33            width:600px;              
34        }
35
36    </style>
37</head>
38
39<body>
40    <button id="btn1">メール登録一覧表示</button>
41    <p id="test"></p>
42    <ul>
43    <li>エントリー名｜カテゴリー名｜ブログ名</li>
44    <li>エントリー名｜カテゴリー名｜ブログ名</li>
45    </ul>
46
47</body>
48</html>

上記web側コードでjsonデータを受け取り、htmlにリスト(表)のような形式で表示したいと考えております。<script>の//でコメントアウトしているコードは、一通り試しました。

現状のコードでは、下記がブラウザ上に表示されます。
・下記はjsonデータになっているでしょうか。
・[]は配列/リストのような構造と認識しております。
"abc1"、"abc2"、"abc3"、"abc4"...を取り出して、上から順番に縦に表示、
"def1"、"def2"、"def3"、"def4"...を取り出して、abcの横に上から順番に縦に表示して、
表のような形式で表示したいです。
・リストのように表示するにはfor文で一個ずつ取り出してhtmlにあてはめていくようなイメージでしょうか。

退会済みユーザー

2021/09/08 23:38 編集

> ・これをインデックス(添え字)で取り出すにはどうすればいいでしょうか。意味がわかりません。ブラウザ上に整形して表示したいということであれば、どのような形に表示したいかを書いてもらった方がわかりやすいと思います。

dyrobin

2021/09/09 00:00

ありがとうございます。変更しました。ご確認頂ければ幸いです。

退会済みユーザー

2021/09/09 00:29

> "abc1"、"abs2"、"abc3"、"abc4"...を取り出して、上から順番に縦に表示、 "abs2" は "abc2" の間違い？

dyrobin

2021/09/09 00:45

失礼致しました、abc2の間違いです。修正致しました。よろしくお願い致します。

退会済みユーザー

2021/09/09 00:51 編集

質問の一番下に書いてある JSON 文字列を JSON.parse すると JavaScript の 2 元配列になるので、それから値を取り出してはいかがですか？具体例は後で回答欄に書いておきます。

行動規範の内容に同意します

回答1件

ベストアンサー

質問の一番下に書いてある JSON 文字列、

[
 [1, "abc1", "def1", "aq", "2021-09-07|07:17:29"], 
 [2, "abc2", "def2", "ede", "2021-09-07|07:20:51"], 
 [3, "abc3", "def3", "wsw", "2021-09-07|21:32:09"], 
 [4, "abc4", "def4", "wsw", "2021-09-07|21:32:11"]
]

をスクリプトの str.data で取得できるので、それから個々の値を取り出してブラウザに表示したいということだと理解しています。

であれば、その JSON 文字列をパースすると JavaScript の 2 元配列になるので、それから値を取り出してはいかがですか？

上のコードでは、変数 json に JSON 文字列を代入し、それを JSON.parse でパースした結果が obj です。画像は Chrome のデベロッパーツールでデバッグ中のものですが、obj が 2 元配列になっているのが分かりますか？

上のコードの実行結果は以下のようになります。

table に入れるとか、カッコよく成形したいという場合はご自分で考えてみてください。

投稿2021/09/09 01:07

退会済みユーザー

総合スコア0

dyrobin

2021/09/09 02:18

ws5.onmessage = function (message) { var json = message; var obj = JSON.parse(json); var str = ''; for (var i = 0; i < obj. length; i ++) { for (var j = 0; j < obj[i].length; j++) { str += obj[i][j] + ' ' } str += '<br />'; } var result2 = document.getElementById('result2'); result2.innerHTML = str; //var data = {"name":"山田", "age":21} //alert('name:' + data.name + 'age:' + data.age); //var obj = JSON.parse(str); //var obj = $.parseJSON(str); //var str2 = obj[2] //var str2 =str[1] //alert(data["1"]); //var str1 = str.split(')'); //$.each(str,function(index,element){ //$('#test').append(index + ':' + element + '<br>'); //}); //$('#test').append(str.data); }; }); </script> </head> <body> <button id="btn1">メール登録一覧表示</button> <p id="result2"></p> </body> ご回答ありがとうございます。ご教示の通りの動作を実現したいです。ただ、上記変更後のスクリプトでは動きませんでした。 var json = message;に問題があるようです。 var json = '[[1,・・・・直接jsonデータを書き込むと意図した動作ができました。(ご教示頂いたスクリプトの完コピ) var jsonにソケット経由で受け取った変数を代入する場合、どのようにすればいいでしょうか。 (各スクリプトの意味は動作確認後に勉強します。)

退会済みユーザー

2021/09/09 02:29

上の回答に書いた通り、質問に書いてあったコード、 ws5.onmessage = function (message) { var str = message; $('#test').append(str.data); }; の str.data で JSON 文字列が取得できると理解していたのですが、違うのですか？

dyrobin

2021/09/09 02:56

[ [1, "abc1", "def1", "aq", "2021-09-07|07:17:29"], [2, "abc2", "def2", "ede", "2021-09-07|07:20:51"], [3, "abc3", "def3", "wsw", "2021-09-07|21:32:09"], [4, "abc4", "def4", "wsw", "2021-09-07|21:32:11"]] 上記のデータ(""の中身は編集しています)が下記コードにより、webブラウザに表示されます。 ws5.onmessage = function (message) { var str = message; $('#test').append(str.data); }; しかし、それがjson文字列なのかはよくわかりません。サーバ側でjson.dumpsをしているので、json文字列になっていると認識していました。そもそもjson文字列を送信できていない可能性があるということでしょうか。

退会済みユーザー

2021/09/09 03:13

> それがjson文字列なのかはよくわかりません。編集する前は知りませんが、少なくともそれは JSON 文字列です。それが証拠にパースして JavaScript の 2 次元配列を取得できてます。回答の画像を見てください。あなたも私のコードをコピペして試して確認したのでは？

dyrobin

2021/09/09 03:24

たしかに、おっしゃる通りです。現状では、「var json = '[[1, "abc1",・・・]]'」を「var json = message;」にすると動作しないので、そこに問題があると思います。サーバ側コンソールで、print(type(Mail_List1)で形式を確認しましたが、 <class 'str'>となり文字列になっていることは確認しました。その他、考えられる要因などご教示頂けないでしょうか。

退会済みユーザー

2021/09/09 03:34

> 現状では、「var json = '[[1, "abc1",・・・]]'」を「var json = message;」にすると動作しないので、そこに問題があると思います。 ws5.onmessage = function (message) { var str = message; $('#test').append(str.data); }; で str.data に取得できていたのですよね。であれば var json = message.data; でないとダメだと思いますけど？こういう問題が起こった特はディベロッパーツールなどを使ってデバッグしてください。「デバッグできない」＝「開発できない」ぐらいに支障があることですので。

dyrobin

2021/09/09 03:40

var json = message.data;で、動作しました。ご指摘ありがとうございます。恥ずかしながら、avascriptも勉強中で、ディベロッパーツールもあまり使ったこともなく。。。精進します。ご回答ありがとうございました。

行動規範の内容に同意します