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

テンプレート内の Flask から JavaScript にデータを渡す

Flask では、render_template() 関数は HTML で使用するために変数をビューに渡します。しかし、同じテンプレート内で JavaScript にデータを渡すにはどうすればよいでしょうか?

Flask アプリが辞書を返す API を呼び出す次の例を考えてみましょう。目標は、Google Maps API で使用できるように経度と緯度の情報を JavaScript に渡すことです。

<code class="python">from flask import Flask, render_template

app = Flask(__name__)

@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)</code>

ソリューション

Flask では、{{ 変数を使用できます}} プレースホルダー構文は、JavaScript コードを含め、テンプレート内の任意の場所に配置できます。

地理コード データを JavaScript に渡すには、それを {{ }} プレースホルダー内に含めるだけです。

<code class="html"><script>
  var someJavaScriptVar = '{{ geocode[1] }}';
</script></code>

これにより、 geocode[1] の値 (経度) を JavaScript 変数 someJavaScriptVar に挿入します。

データを配列として渡すには、join() 関数を使用できます。

<code class="html"><script>
  var myGeocode = [{{ ', '.join(geocode) }}];
</script></code>

これにより、次の JavaScript が生成されます:

<code class="javascript">var myGeocode = ['value_of_geocode[0]', 'value_of_geocode[1]'];</code>

また、{{ }} プレースホルダー内で for ループや if ステートメントなどの高度な構成を使用することもできます。詳細については、Jinja2 のドキュメントを参照してください。

さらに、tojson フィルターを使用して Python オブジェクトを JSON 文字列に変換でき、これは JavaScript で直接使用できます。

<code class="html"><script>
  var myGeocode = {{ geocode|tojson }};
</script></code>

このアプローチでは、次のことが可能になります。複雑なデータ構造を Flask からテンプレート内の JavaScript に渡す便利な方法です。

以上がデータを Flask からテンプレート内の JavaScript に渡すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。