Le passage d'un objet JSON à partir Flacon de JavaScript

Je vais avoir des ennuis un Flacon/Python variable passée à Javascript.

En gros, je suis l'importation de MySQL et ont essayé rendu le retour de trois façons différentes.

(43.8934276, -103.3690243), (47.052060, -91.639868), (45.1118, -95.0396) c'est la sortie de mon dict de l'élément a de la suite couru sur celui-ci.

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 bon, mais je l'ai ajouté pour plus de détails, il n'est pas dans le bon format.

Je passe le python dict directement sur le modèle de ce qui ressemble à ceci

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

Puis sur le modèle de côté, j'ai essayé le code JavaScript suivant les lignes

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

Aucun travail, ensemble ou séparément.

J'ai aussi essayé d'envoyer le dictionnaire de la vue à l'aide de json_out = json.dumps(My_Dict) qui ne fonctionne pas non plus.

C'est tous avec l'objectif d'obtenir la lat, lng coords de la DB MySQL à l'API Google Maps script. La chose qui est si déroutant pour moi, c'est que si je viens de le coller au format json.affichage des résultats à partir de la vue sur le Google Maps de script, il fonctionne parfaitement (après les guillemets sont supprimés), mais si j'utilise une variable, il ne fonctionnera pas pour moi. Quelqu'un aurait-il des suggestions?

Qu'est-ce que la sortie souhaitée dans le rendu HTML?
Des marqueurs sur une Carte Google.
Désolé, je veux dire ce que le format de sortie (coordonnées) sont ce que vous cherchez?
Oh désolé, il doit ressembler à cela, il suffit d'un objet JavaScript, correct? J'ai pensé que vous pourriez obtenir à partir de JSON en utilisant le format JSON.parse(json_object)? [{lat: 43.8934276, le gnl: -103.3690243}, {lat: 47.052060, le gnl: -91.639868}, {lat: 45.1118, le gnl: -95.0396}]

OriginalL'auteur BrettJ | 2017-02-28

16

Il semble que le moment accepté de répondre (par @BrettJ) a une possible faille de sécurité: si l'objet nous passer de javascript a une chaîne de caractères avec une apostrophe à l'intérieur, cette apostrophe ne seront pas échappé par json.dumps, permettant ainsi d'injecter du code arbitraire en javascript. Il est préférable d'utiliser Flacon de tojson() modèle de filtre, voir les docs, comme il fait bon s'échapper de tous ces caractères (remplacer 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>
```
Généré JS ressemble:
```
var user = JSON.parse('{"firstname": "Mr.", "lastname": "My Father\u0027s Son"}');
```
qui est parfaitement sûr. Par exemple, si nous avions utilisation json.dumps-alimenté solution, nous aurions
```
var user = JSON.parse('{"firstname": "Mr.", "lastname": "My Father's Son"}');
```
qui est syntaxiquement incorrect (pour dire le moins).

Votre réponse qui fonctionne pour moi. J'ai changé mes accepté de répondre, l'amélioration de la sécurité est toujours égal à un code de meilleure qualité.
Merci beaucoup! Vous m'avez sauvé beaucoup de temps! 🙂

OriginalL'auteur 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 (code retiré pour des raisons 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                                                          
        });                                                                 

    }                                                                       
  }

Merci pour la réponse! Ok, alors pourquoi est-ce qui se passe? Si je fais tout comme tu le dis les marqueurs n'apparaissent pas sur la carte. Dans Google Maps, je suis tout simplement la mise en var locations = points; Cependant, si je fais un copier-coller de la sortie des points var défini par vous, et ne var locations = [{lat: 43.8934276,lng: -103.3690243 },{lat: 47.05206,lng: -91.639868}, {lat:45.1118,lng: -95.0396 }] directement dans les cartes de script, il fonctionne parfaitement!... Je suis tellement confus.
J'ai ajouté quelques exemple de code Javascript pour rendre les marqueurs sur la carte. Testé en local et qu'elle rend les marqueurs pour moi. Espérons que cette aide!
Vous sir es un dieu! Je vous remercie beaucoup. Mon plus gros problème, tout ce temps a été réelle script de carte lui-même... comment décevant. Merci une tonne!!
Aussi, note à moi-même et/ou le futur, les personnes avec ce problème. J'ai eu un trait de soulignement dans ma variable JS qui ne l'ont pas apprécié. Une fois que j'ai changé, les choses sont beaucoup mieux fonctionné. Je n'ai jamais écrit en JS donc je ne suis pas sûre que ce soit une règle ou un problème de syntaxe ou quoi. De toute façon, encore une fois merci Matt.
Il y a un problème de sécurité dans cette solution (possible de code javascript arbitraire d'injection) en raison du manque de s'échapper de l'apostrophe. Il est préférable d'utiliser tojson Flacon modèle de filtre. Voir ma réponse pour plus de détails.

OriginalL'auteur Matt Healy

Vous devez vous connecter pour publier un commentaire.