python: Flask app.pyでjsonデータを読み込みjavascriptで使用する簡単な方法
備忘録です。
今回はFlaskアプリ内のjavascriptファイルでjsonファイルのデータをちょっと使用するための簡単な方法の備忘録。
JSONデータをFlaskで使用する
今回はflaskでjavascriptを使用して簡単なゲームを作って公開してみようと思った際に、jsonファイル内のデータをjavascriptで使用したくて、簡単に使用するにはこれかなという方法があったのでその備忘録。
その1 app.pyでjsonファイルのデータを読み込む
ファイルの構成はこちら
jsonファイルはstaticフォルダ内のjsフォルダに格納(クイズのデータなのでquiz.json)
#app.py
今回はindex.htmlだけなのでその関数内でjsonを読み込んで変数に格納してテンプレを読み込む際に渡しています。
その2 base.html内でjavascriptファイルを読み込む
javascriptファイルを共有ファイルのbase.html内のbodyタグ内に普通に読み込ませる。
# base.html
javascriptファイルはこれで適用可能。
その3 jsonデータを格納した変数をjsの変数に渡す
app.pyで読み込んだjsonファイルを格納した変数をjinjaで呼び出しそれをjavascriptの変数に再度渡し直す。
# base.html
その2で設置したjsファイルのscriptタグの上にもう一つscriptタグを作り、app.pyで設定した変数をjinjaで呼び出し、jsの変数dataに格納する。
これで、jsファイル内でこの変数が使用できるようになった。