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

テンプレート内の Flask から JavaScript へのデータの受け渡し

概要

Flask アプリケーションでは、特にテンプレート内の Python 辞書から JavaScript に情報を渡す必要があります。 Googleマップ用Flask の API.

ソリューション

Render_template は、HTML レンダリング用のテンプレートに変数を渡すメカニズムを提供します。この機能を JavaScript に拡張するには、Jinja テンプレート エンジンを利用できます。方法は次のとおりです:

1. どこでも変数を組み込む: Jinja 変数は、JavaScript 部分を含むテンプレート全体で使用できます。
2. 直接割り当て: {{ 変数 }} を使用して JavaScript 変数を直接割り当てます。たとえば、経度を JavaScript 変数に割り当てることができます:

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

3. 配列定義の生成: JavaScript に配列を渡したい場合は、配列を生成します。配列定義としてテンプレート:

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

4. Jinja コンストラクトの利用: Jinja は、より高度なコンストラクトを提供します。たとえば、結合フィルターを使用して配列定義を短縮できます:

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

5. tojson フィルターを検討してください: より複雑なデータ構造の場合は、tojson フィルターを使用して、辞書とリストを JavaScript で使用できるように JSON 文字列に変換します:

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

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