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

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

アプリケーションは API を利用して、辞書に格納されているデータを取得します。目標は、特定の情報、つまり経度と緯度の座標をこの辞書からビュー内の JavaScript に渡すことです。これをどのように実現できるかを理解するには、テンプレートに変数を渡す Flask のプロセスを理解することが不可欠です。

Flask は render_template 関数を利用して、ブラウザでレンダリングされるテンプレートに変数を送信します。 Jinja2 テンプレート エンジンを使用すると、HTML マークアップ内でこれらの変数にアクセスして表示できます。

変数を JavaScript で使用できるようにするには、Python 式をテンプレートに直接埋め込む Jinja2 の機能を利用できます。変数名を二重中括弧 ({{ 変数名 }}) で囲むだけです。たとえば、次のコード スニペットを使用してジオコードを JavaScript に渡すことができます。

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

このコード スニペットは、geocode[1] の値を JavaScript 変数 myGeocode に割り当てます。 HTML ドキュメント内の位置に関係なく、この構文を使用してテンプレートに渡された変数にアクセスできることに注意してください。

リストのようなより複雑なデータ構造の場合は、join() 関数を利用してカンマを構築できます。 - で区切られた文字列を配列として JavaScript に渡します。以下に例を示します:

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

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