質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
Flask

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

解決済

【Jinja2】python+flaskを使った開発。コンソール上では表示されるデータが、HTML上で表示できない。

yujin1202
yujin1202

総合スコア49

Flask

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

1回答

0リアクション

0クリップ

1290閲覧

投稿2021/05/01 06:49

編集2021/05/06 00:10

<後記、2021年5月6日> 
全体像として、何をやりたかったを、Githubに記載しました。
宜しかったら、眺めてください。改めて、皆さま、ありがとうございました。
https://github.com/kazu0116/web_application

=====================

HTMLと言うか、Jinja2の書き方の問題と言う気がするのですが、どうしても分かりません。
教えてください。

<背景>
Python Flaskを使用して、DB(mysql)サーバから、データを引っ張ってきて、HTMLに表示すると言う、下記の様なシステムを開発しております。

1)ユーザーは、HTML(index.html)上で、旅行したい国のチェックボックスにチェックを入れて(複数選択も可)、送信ボタンをクリックする。
![イメージ説明

2)選択された国の旅行情報を、DBから引っ張ってきて、コンソール上に表示すると共に、HTML(index1.html)に表示する。

<説明>
試行錯誤した結果、pythonの方は、下記の様なコードにたどり着きました。

from flask import Flask, render_template,request import pymysql app = Flask(__name__) @app.route('/', methods=['GET']) def get(): return render_template('index.html', \ title = 'Form Sample(get)', \ message = 'Where do you want to go?') def getConnection(): return pymysql.connect( host='localhost', db='first_db', user='root', password='password', charset='utf8', cursorclass=pymysql.cursors.DictCursor ) @app.route('/', methods=['POST']) def select_sql(): connection = getConnection() message = "test" names = request.form.getlist('checkbox') for name in names: cursor = connection.cursor() sql = "select Country, Agency, email from tb3 where Country=%s"; cursor.execute(sql, (name,)) list1s = cursor.fetchall() #TakaiYさんのコメントを受け、誤字修正 print(list1) #コンソール上での動作確認用 cursor.close()   connection.close()  return render_template( 'index1.html', list1s = list1s)  if __name__ == '__main__': app.run()

コンソール上への表示は、1つの国を選択した場合も、複数の国を選択した場合も、期待した通りのデータを返してきます。(ここまでは、OK。下記は、3か国を選択した場合のコンソール表示。)

<コンソール上では表示される>
[{'Country': 'Australia', 'Agency': 'DEF Travel', 'email': '456@yahoo.com'}]
[{'Country': 'England', 'Agency': 'GHI Travel', 'email': '789@hotmail.com'}]
[{'Country': 'France', 'Agency': 'JFK Travel', 'email': '1111@yahoo.co.jp'}]

<質問>
上記の様に、コンソール上には、問題なく表示されておりますが、HTML上で表示が上手くいきません。
(複数項目を選択した場合、最後にチェックした国(上記の例では、フランス)しか、HTML上で表示できません。)

<HTML(index1.html)上の表示>
イメージ説明

<index1.htmlのコードは下記>

<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>test_list</title> </head> <body> <h1>{{ title }}</h1> {% block content %} {% for list1 in list1s %} <p>{{list1}}</p> {% endfor %} {% endblock %} --!> </form> </body> </html>

複数項目を表示(HTML上に)させる為には、HTML(index1.html)をどの様に書けば良いのでしょうか?
丸2日間、色々と試したのですが、どうしても上手くいきません。
よろしくお願いいたします。

************
2021年5月3日、TakaiYさんのアドバイスに基づき、解決しております。
最終コードは下記です。(御参考まで)

  1. pythonのコード
from flask import Flask, render_template,request import pymysql app = Flask(__name__) @app.route('/', methods=['GET']) def get(): return render_template('index.html', \ title = 'Form Sample(get)', \ message = 'Where do you want to go?') def getConnection(): return pymysql.connect( host='localhost', db='first_db', user='root', password='yireozna', charset='utf8', cursorclass=pymysql.cursors.DictCursor ) @app.route('/', methods=['POST']) def select_sql(): connection = getConnection() message = "test" names = request.form.getlist('checkbox') list1s=[] for name in names: cursor = connection.cursor() sql = "select Country, Agency, email from tb3 where Country=%s"; cursor.execute(sql, (name,)) list = cursor.fetchall() list1s.append(list1) cursor.close() connection.close() print(list1s) #コンソール上で、キチンとデータが取得できているかどうかの確認用 return render_template( 'index1.html', list1s = list1s) if __name__ == '__main__': app.run()

2.index.htmlのコード

<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Hello World</title> </head> <body> <h1>{{ title }}</h1> <p>{{ message }}</p> <form action="/" method="POST" enctype="multipart/form-data"> <div> <label for="ck1">Afgahanistan:</label> <input type="checkbox" id="ck1" name="checkbox" value="Afgahanistan"> </div> <div> <label for="ck2">Australia:</label> <input type="checkbox" id="ck2" name="checkbox" value="Australia"> </div> <div> <label for="ck3">England:</label> <input type="checkbox" id="ck3" name="checkbox" value="England"> </div> <div> <label for="ck4">France:</label> <input type="checkbox" id="ck4" name="checkbox" value="France"> </div> <div> <input type="submit" value="送信"> </div> </form> </body> </html> 3.index1.htmlのコード ```ここに言語を入力 <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Hello World</title> </head> <body> <h1>{{ title }}</h1> {% block content %} {% for list1 in list1s %} <p>{{loop.index}}:{{list1}}</p> {% endfor %} {% endblock %} </form> </body> </html>コード

4.mysqlのtb3のテーブル内容

mysql> select * from tb3;
+--------------+------------+------------------+
| Country | Agency | email |
+--------------+------------+------------------+
| Afgahanistan | ABC Travel | 123@gmail.com |
| Australia | DEF Travel | 456@yahoo.com |
| England | GHI Travel | 789@hotmail.com |
| France | JFK Travel | 1111@yahoo.co.jp |
+--------------+------------+------------------+
4 rows in set (0.00 sec)

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

TakaiY

2021/05/01 07:51

そもそもこのコードは動かないのではありませんか? 質問の焦点になっているはずの「list1s」がどこにも定義されていません。 「(複数項目を選択した場合、最後にチェックした国(上記の例では、フランス)しか、HTML上で表示できません。)」となっているときのソースに差し替えてください。
yujin1202

2021/05/01 11:46

早速のコメントをありがとうございます。 大変失礼いたしました。 Pythonファイルの下から7行目で、list1sを定義していたのですが、"s"が抜けておりました。 従って、該当行を下記の様に修正しました。(このサイトに転記する際のミスでした。) また、修正後のコードで動作するのも、たった今、確認しました。 *** list1s = cursor.fetchall() #TakaiYさんのコメントを受け、誤字修正 *** HTML(index1.html)の方は、一切、変えておりません。 これで、如何でございましょうか? お手数をおかけしますが、教えて頂きたく。 よろしくお願いいたします。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Flask

FlaskはPython用のマイクロフレームワークであり、Werkzeug・Jinja 2・good intentionsをベースにしています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。