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

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

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

解決策:

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

  <script>
    var someJavaScriptVar = '{{ geocode[1] }}';
  </script>


  <p>Hello World</p>
  <button onclick="alert('Geocode: {{ geocode[0] }} ' + someJavaScriptVar)">Click me</button>

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

リストを JavaScript に渡すには、以下を作成する必要があります。出力内の配列定義:

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

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

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


  <p>Hello World</p>
  <button onclick=""alert('Geocode:" mygeocode></button>

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

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

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