☰

テンプレートで Flask から JavaScript にデータを渡すにはどうすればいいですか? 質問する

tag-icon • tag-icon javascript python flask jinja2
テンプレートで Flask から JavaScript にデータを渡すにはどうすればいいですか? 質問する

私のアプリは、辞書を返す API を呼び出します。この辞書からの情報をビューの JavaScript に渡したいと考えています。具体的には、JS で Google Maps API を使用しているので、経度/緯度情報を含むタプルのリストを渡したいと思います。render_templateこれらの変数がビューに渡されて HTML で使用できるようになることはわかっていますが、テンプレートで JavaScript に渡すにはどうすればよいのでしょうか。

from flask import Flask
from flask import render_template

app = Flask(__name__)

import foo_api

api = foo_api.API('API KEY')

@app.route('/')
def get_data():
    events = api.call(get_event, arg0, arg1)
    geocode = event['latitude'], event['longitude']
    return render_template('get_data.html', geocode=geocode)

ベストアンサー1

{{ variable }}HTML 部分だけでなく、テンプレートのどこでも使用できます。つまり、次のように動作するはずです:

<html>
<head>
  <script>
    var someJavaScriptVar = '{{ geocode[1] }}';
  </script>
</head>
<body>
  <p>Hello World</p>
  <button onclick="alert('Geocode: {{ geocode[0] }} ' + someJavaScriptVar)" />
</body>
</html>

これを 2 段階のプロセスとして考えてみましょう。まず、Jinja (Flask が使用するテンプレート エンジン) がテキスト出力を生成します。これは、表示される JavaScript を実行するユーザーに送信されます。Flask 変数を JavaScript で配列として使用できるようにするには、出力で配列定義を生成する必要があります。

<html>
  <head>
    <script>
      var myGeocode = ['{{ geocode[0] }}', '{{ geocode[1] }}'];
    </script>
  </head>
  <body>
    <p>Hello World</p>
    <button onclick="alert('Geocode: ' + myGeocode[0] + ' ' + myGeocode[1])" />
  </body>
</html>

Jinja は Python からのより高度な構造も提供しているため、次のように短縮できます。

<html>
<head>
  <script>
    var myGeocode = [{{ ', '.join(geocode) }}];
  </script>
</head>
<body>
  <p>Hello World</p>
  <button onclick="alert('Geocode: ' + myGeocode[0] + ' ' + myGeocode[1])" />
</body>
</html>

forループやifステートメントなど、他にもさまざまなものを使用できます。Jinja2 ドキュメント多くのための。

また、フォードの回答を見てください。tojsonフィルターはJinja2の標準フィルターセット。

2018 年 11 月編集: tojsonJinja2 の標準フィルター セットに含まれるようになりました。

おすすめ記事