PythonのFlaskで配列と辞書をテンプレートに渡す方法

PythonのFlaskで配列と辞書をテンプレートに渡す方法です。

PythonのFlaskで配列と辞書をテンプレートに渡す
1. PythonのFlaskで配列を受け取る
2. PythonのFlaskで辞書を受け取る
まとめ

PythonのFlaskで配列と辞書をテンプレートに渡す

Python側で作成した配列や辞書の変数をFlask(jinja2）のテンプレートで受けるにはFor文を使って簡単に受け取ることができます。

PythonのFlaskで配列を受け取る

PythonのFlaskで配列を受け取るには配列の長さ分、処理を繰り返す必要があります。

まずはPython側です。

@app.route( "/sample.html", methods=[ "GET" ] )
def sample_page():
    ar = []
    ar.append( "No.1" )
    ar.append( "No.2" )
    ar.append( "No.3" )
    return render_template( "sample.html" , array=ar)

配列を準備します。

次は実際に表示する側（Flask（jinja2））です。

<!doctype html>
<html>
    <head>
    </head>
    <body>
        {%- for i in range( array|length) %}
            <div>{{i}}番目={{ array[i] }}</div>
        {%- endfor %}
    </body>
</html>

これで実行すると

0番目=No.1
1番目=No.2
2番目=No.3

と表示できます。

PythonのFlaskで辞書を受け取る

PythonのFlaskで辞書を受け取るには辞書のアイテム数分、処理を繰り返す必要があります。

@app.route( "/sample.html", methods=[ "GET" ] )
def sample_page():
    dic = {}
    dic[ "name" ] = "name1"
    dic[ "age" ] = "20"
    return render_template( "sample.html" ,dic=dic )

辞書を表示するHTMLは

<!doctype html>
<html>
    <head>
    </head>
    <body>
        {%- for item in dic %}
        <div>{{ dic[item] }}</div>
        {%- endfor %}
    </body>
</html>

で実行すると

name1
20

と表示されます。

まとめ

Python側で作成した配列や辞書の変数をFlask(jinja2）のテンプレートで受けるにはFor文を使って簡単に受け取ることができます。