概要
Flaskで開発をしているときにjsonファイルを読み込み、HTMLのSELECTに反映させたい。
開発環境
- Python 3.6
- Flask 1.1.2
解決策
HTML
index.html
（一部省略）
<select>
{% for o in data %}
<option value="{{ o.name }}">{{ o.name }}</option>
{% endfor %}
</select>
（一部省略）
Python
app.py
#!/usr/bin/env python
# -*- coding: utf-8 -*-
from flask import Flask, render_template
import json
json_data = json.load(open('data.json'))
names = [{'name': json_data[i]['name']} for i in range(len(json_data))]
@app.route('/')
def index():
return render_template('index.html', data=names)
（一部省略）
解説
Python
app.pyでまず、jsonファイルを読み込んでからjson_dataに格納する。
格納した後、keyにname、valueに読み込んだjsonの中身を格納した辞書を定義する。（ここではnamesという変数とする）
後はindex.htmlで定義されているdata変数にnamesを渡してやる。
今回はdict型で書いているが、別にlist型でもいけるみたい。
HTML
index.htmlではfor構文を書く。
{% for o in data %}
･･･
{% endfor %}
ここでのfor構文の書き方はバックエンドにFlaskを使っているときのみ有効な書き方なので注意。 次にfor構文の中身を見ると
{% for o in data %}
<option value="{{ o.name }}">{{ o.name }}</option>
{% endfor %}
となっている。
ここでは渡されたデータが辞書なので、keyで定義されているnameを指定したら値が見られる。
