Comment puis-je passer des données de Flask à JavaScript dans un modèle ?

Question

Mon application fait appel à une API qui renvoie un dictionnaire. Je veux transmettre des informations de ce dict à JavaScript dans la vue. J'utilise l'API Google Maps en JS, donc j'aimerais lui transmettre une liste de tuples avec les informations de longitude/latitude. Je sais que render_template transmettra ces variables à la vue pour qu'elles puissent être utilisées dans HTML, mais comment pourrais-je les transmettre à JavaScript dans le modèle ?

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)

Answer 1

Vous pouvez utiliser {{ variable }} n'importe où dans votre modèle, pas seulement dans la partie HTML. Donc cela devrait fonctionner:

    var someJavaScriptVar = '{{ geocode[1] }}';

  Hello World

Pensez-y comme un processus en deux étapes: Tout d'abord, Jinja (le moteur de templates utilisé par Flask) génère votre sortie de texte. Cela est envoyé à l'utilisateur qui exécute le JavaScript qu'il voit. Si vous voulez que votre variable Flask soit disponible en JavaScript en tant qu'array, vous devez générer une définition d'array dans votre sortie:

      var myGeocode = ['{{ geocode[0] }}', '{{ geocode[1] }}'];

    Hello World

Jinja offre également des contructs plus avancés provenant de Python, vous pouvez donc le raccourcir à:

    var myGeocode = [{{ ', '.join(geocode) }}];

  Hello World

Vous pouvez également utiliser des boucles for, des déclarations if et bien plus encore, voir la documentation de Jinja2 pour plus d'informations.

Jetez également un coup d'œil à la réponse de Ford qui mentionne le filtre tojson qui est une addition à l'ensemble standard de filtres de Jinja2.

Édition nov 2018: tojson est désormais inclus dans l'ensemble standard de filtres de Jinja2.

Answer 2

La meilleure façon d'obtenir à peu près n'importe quel objet Python dans un objet JavaScript est d'utiliser JSON. JSON est idéal en tant que format de transfert entre les systèmes, mais parfois nous oublions qu'il signifie JavaScript Object Notation. Cela signifie que l'injection JSON dans le modèle est la même que l'injection de code JavaScript décrivant l'objet.

Flask fournit un filtre Jinja pour cela : tojson sérialise la structure en une chaîne JSON et la marque comme sécurisée pour que Jinja ne l'échappe pas automatiquement.

      var myGeocode = {{ geocode|tojson }};

    Bonjour le monde

Cela fonctionne pour toute structure Python qui est sérialisable en JSON :

python_data = {
    'some_list': [4, 5, 6],
    'nested_dict': {'foo': 7, 'bar': 'une chaîne'}
}

var data = {{ python_data|tojson }};
alert('Données : ' + data.some_list[1] + ' ' + data.nested_dict.foo + 
      ' ' + data.nested_dict.bar);

Answer 3

En utilisant un attribut de données sur un élément HTML, vous évitez d'avoir à utiliser un script en ligne, ce qui signifie que vous pouvez utiliser des règles CSP plus strictes pour une sécurité accrue.

Spécifiez un attribut de données comme ceci :

...

Ensuite, accédez-y dans un fichier JavaScript statique comme ceci :

// JavaScript brut
var geocode = JSON.parse(document.getElementById("mydiv").dataset.geocode);

// jQuery
var geocode = JSON.parse($("#mydiv").data("geocode"));

Answer 4

Vous pouvez également ajouter un point de terminaison pour renvoyer votre variable :

@app.route("/api/geocode")
def geo_code():
    return jsonify(geocode)

Ensuite, effectuez une requête XHR pour la récupérer :

fetch('/api/geocode')
  .then((res)=>{ console.log(res) })

Answer 5

Les réponses de travail sont déjà données mais je veux ajouter une vérification qui agit comme une sécurité en cas où la variable flask n'est pas disponible. Lorsque vous utilisez :

var myVariable = {{ flaskvar | tojson }};

s'il y a une erreur qui rend la variable inexistante, les erreurs résultantes peuvent produire des résultats inattendus. Pour éviter cela :

{% if flaskvar is defined and flaskvar %}
var myVariable = {{ flaskvar | tojson }};
{% endif %}