ホームページ  >  記事  >  バックエンド開発  >  Flask からテンプレート内の JavaScript にデータを渡し、それを Google マップで使用する方法

Flask からテンプレート内の JavaScript にデータを渡し、それを Google マップで使用する方法

Linda Hamilton
Linda Hamiltonオリジナル
2024-10-30 13:57:27975ブラウズ

How to Pass Data from Flask to JavaScript in a Template and Use it with Google Maps?

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

問題: JavaScript コードで API 呼び出しから取得した辞書を利用したいFlask テンプレート内で、特に、long/lat タプルを Google Maps API に渡すために使用します。

解決策:

テンプレート内の Flask から JavaScript に変数を渡すには、次のようにします。 {{ 変数 }} 構文はその中のどこでも使用できます。たとえば、get_data.html テンプレート内:

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

これにより、JavaScript 変数の割り当てを含む HTML 出力が生成されます。

リストを 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])">Click me</button>
  </body>
</html>

Jinja2 は高度な Python 構造もサポートしています。たとえば、上記は次のように短縮できます:

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

Jinja2 フィルターを利用することもできます。辞書が JSON 形式の場合は、tojson フィルターを使用して JavaScript オブジェクトに変換できます:

<script>
  var myGeocode = {{ geocode|tojson }};
</script>

以上がFlask からテンプレート内の JavaScript にデータを渡し、それを Google マップで使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。