Comment transmettre des données de Flask à JavaScript dans un modèle et les utiliser avec Google Maps ?

Transmission de données de Flask vers JavaScript dans un modèle

Problème : Vous souhaitez utiliser un dictionnaire récupéré à partir d'un appel d'API dans votre code JavaScript au sein d'un modèle Flask, notamment pour transmettre des tuples long/lat à l'API Google Maps.

Solution :

Pour transmettre des variables de Flask à JavaScript dans un modèle, vous peut utiliser la syntaxe {{ variable }} n'importe où à l'intérieur. Par exemple, dans votre modèle get_data.html :

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


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

Cela génère la sortie HTML qui contient l'affectation de variable JavaScript.

Pour transmettre une liste à JavaScript, vous devrez créer une définition de tableau dans votre sortie :

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

Jinja2 prend également en charge les constructions Python avancées. Par exemple, ce qui précède peut être raccourci en :

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


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

Vous pouvez également exploiter les filtres Jinja2. Si votre dictionnaire est au format JSON, vous pouvez utiliser le filtre tojson pour le convertir en objet JavaScript :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!