ビジネスパーソン・ガジェット置場 empty lot for business

営業や仕事、それに伴う生活を便利に楽にするツール、ガジェットを作ります。既にあるツールも自分用にカスタマイズ。

python: Flask app.pyでjsonデータを読み込みjavascriptで使用する簡単な方法

備忘録です。

今回はFlaskアプリ内のjavascriptファイルでjsonファイルのデータをちょっと使用するための簡単な方法の備忘録。

JSONデータをFlaskで使用する

今回はflaskでjavascriptを使用して簡単なゲームを作って公開してみようと思った際に、jsonファイル内のデータをjavascriptで使用したくて、簡単に使用するにはこれかなという方法があったのでその備忘録。

 

その1 app.pyでjsonファイルのデータを読み込む

ファイルの構成はこちら

|_static
 |_js
   |_quiz.json
   |_main.js
|_templates
 |_index.html
 |_base.html
|_app.py

jsonファイルはstaticフォルダ内のjsフォルダに格納(クイズのデータなのでquiz.json)

 

#app.py

from flask import Flask, render_template, flash, request, redirect, url_for
import json

app = Flask(__name__)



@app.route('/')
def index():
    with open('static/js/quiz.json') as f:
        jdata = json.load(f)
    return render_template('index.html', jdata=jdata)

今回はindex.htmlだけなのでその関数内でjsonを読み込んで変数に格納してテンプレを読み込む際に渡しています。

 

その2 base.html内でjavascriptファイルを読み込む

javascriptファイルを共有ファイルのbase.html内のbodyタグ内に普通に読み込ませる。

# base.html

<script type="text/javascript" src="{{ url_for('static', filename='js/main.js') }}"></script>

 

javascriptファイルはこれで適用可能。

 

その3 jsonデータを格納した変数をjsの変数に渡す

app.pyで読み込んだjsonファイルを格納した変数をjinjaで呼び出しそれをjavascriptの変数に再度渡し直す。

 

# base.html

<script type="text/javascript">
    var data = {{ jdata | tojson }}
</script>

<script type="text/javascript" src="{{ url_for('static', filename='js/main.js') }}"></script>

その2で設置したjsファイルのscriptタグの上にもう一つscriptタグを作り、app.pyで設定した変数をjinjaで呼び出し、jsの変数dataに格納する。

 

これで、jsファイル内でこの変数が使用できるようになった。