web-dev-qa-db-fra.com

Passer un objet JSON de Flask à JavaScript

J'ai du mal à faire passer une variable Flask/Python en Javascript.

Fondamentalement, j'importe de MySQL et j'ai essayé de rendre le retour de trois manières différentes.

  1. (43.8934276, -103.3690243), (47.052060, -91.639868), (45.1118, -95.0396) Qui est la sortie lorsque mon élément dict a ce qui suit exécuté dessus.

new_list = [Tuple(d.values()) for d in MySQL_Dict] output = ', '.join('(' + ', '.join(i) + ')' for i in new_list)

Cette méthode n'est pas bonne, mais je l'ai ajoutée pour plus de détails, elle n'est pas du tout au bon format.

  1. Je passe le dict python directement au modèle qui ressemble à ceci

({'lat': '43.8934276', 'lng': '-103.3690243'}, {'lat': '47.052060', 'lng': '-91.639868'}, {'lat': '45.1118', 'lng': '-95.0396'})

Ensuite, du côté du modèle, j'ai essayé les lignes JavaScript suivantes

 var other_coords = {{ MySQL_Dict|tojson }}; 
 var other_coords = {{ MySQL_Dict|tojson|safe }};
 var still_more = JSON.parse(other_coords);

Aucun ne fonctionne, ensemble ou séparément.

  1. J'ai également essayé d'envoyer le dictionnaire depuis la vue en utilisant json_out = json.dumps(My_Dict) qui ne fonctionne pas non plus.

Tout cela dans le but d'obtenir les coordonnées lat, lng de la base de données MySQL au script API Google Maps. La chose qui me dérange tellement, c'est que si je colle simplement les résultats json.dump de la vue dans le script Google Maps, cela fonctionne parfaitement (après la suppression des guillemets), mais si j'utilise une variable, cela ne fonctionnera pas pour moi. Quelqu'un a-t-il des suggestions?

javascriptpythongoogle-mapsflaskjinja2
10
BrettJ

Il semble que la réponse actuellement acceptée (par @BrettJ) ait une faille de sécurité possible: si l'objet que nous passons à javascript a une chaîne avec une seule citation à l'intérieur, cette citation ne sera pas échappée par json.dumps , permettant ainsi d'injecter du code arbitraire en javascript. Il est préférable d'utiliser le filtre de modèle tojson() de Flask, voir the docs , car il permet d'échapper correctement tous ces caractères (remplacez-les par des codes unicode).

Voici ma solution:

view.py 

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def hello_world():
    user = {'firstname': "Mr.", 'lastname': "My Father's Son"}
    return render_template("index.html", user=user)

if __name__ == '__main__':
    app.run()

index.html 

<p>Hello, <span id="username"></span></p>
<script>
    var user = JSON.parse('{{ user | tojson | safe}}');
    document.getElementById('username').innerHTML = user.firstname + " " +
            user.lastname;
</script>

Le JS généré ressemble à:

var user = JSON.parse('{"firstname": "Mr.", "lastname": "My Father\u0027s Son"}');

ce qui est parfaitement sûr. Par exemple, si nous utilisions une solution propulsée par json.dumps, Nous obtiendrions

var user = JSON.parse('{"firstname": "Mr.", "lastname": "My Father's Son"}');

ce qui est syntaxiquement incorrect (pour dire le moins).

23
Ilya V. Schurov

L'exemple simple ci-dessous devrait montrer comment obtenir un objet Javascript à partir de votre dict:

views.py

@app.route('/', methods=['GET','POST'])                                         
def index():                                                                    

    points = [{"lat": 43.8934276, "lng": -103.3690243},                         
              {"lat": 47.052060, "lng": -91.639868},                            
              {"lat": 45.1118, "lng": -95.0396}]                                

    return render_template("index.html", points=json.dumps(points))

index.html (du code a été supprimé pour plus de concision)

  function initMap() {                                                      

    var map = new google.maps.Map(document.getElementById('map'), {         
      center: new google.maps.LatLng(43.8934276, -103.3690243),             
      zoom: 4                                                               
    });                                                                     

    var points = JSON.parse('{{ points|safe }}');                           
    var marker;                                                             

    for (var i = 0; i < points.length; i++) {                               

        marker = new google.maps.Marker({                                   
          position: new google.maps.LatLng(points[i].lat, points[i].lng),   
          map: map                                                          
        });                                                                 

    }                                                                       
  }
2
Matt Healy