BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] テンプレートでFlaskからJavaScriptにデータを渡すにはどうしたらいいですか？

2022-04-28 15:57:02

質問

私のアプリは、辞書を返すAPIに呼び出しを行います。この辞書からビュー内のJavaScriptに情報を渡したいのです。私は特にJSでGoogle Maps APIを使用しているので、私はそれにlong/lat情報を持つタプルのリストを渡したいと思っています。私が知っているのは 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)

解決方法は？

を使用することができます。 {{ 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 ドキュメント をご覧ください。

また、Ford の回答で tojson フィルタに追加されます。 Jinja2 の標準的なフィルターセット .

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

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します