2017-07-16 4 views
1

Ich weiß, wie eine Variable aus Flask (Python) zu meiner Vorlage HTML-Datei mit {{data}} übergeben. Ich habe jedoch Probleme beim Zugriff auf jedes Wörterbuchelement und seine jeweiligen Schlüssel-Wert-Paare in der Liste in Javascript.Python - eine Liste von dict in Javascript übergeben Flask

start.py

def func1(): 
     data = filter() #returns a list of dictionaries 

    return render_template("template1.html", data=data) 

template1.html

<html> 
    <head> 
    ..... 
    </head> 
    <body> 
    <p>This is html: {{data}}</p> 

    <script type="text/javascript" src="{{url_for('static', filename='js/add.js') }}"></script> 
    <script type="text/javascript"> 
    myvar = '{{data}}'; 
    document.write(myvar); 

    </script> 
    </body> 

</html> 

add.js

//code to be written here 

myvar und This is html: geben beide die gesamte Liste der Wörterbücher aus. Ich habe bereits myvar[0] versucht, aber das gibt nur [ aus irgendeinem Grund aus. Ich habe auch getan:

myvar = '{{data|tojson}}'; 
var parsed = JSON.parse(myvar); 
document.write(parsed[0]); 

aber das gibt [object Object].

Antwort

0

Verstanden!

myvar = '{{data|tojson}}'; 
var parsed = JSON.parse(myvar); 
document.write(parsed[0]); 

Ausgänge der [object Object], die das Wörterbuch an der Position ist. Also, alles, was Sie tun müssen, ist document.write(parsed[0].name); Zugriff auf seine name Wert!

+2

Verwenden Sie nicht 'document.write()'; Sie werden oft Warnungen vom Browser erhalten. Verwenden Sie 'document.querySelector()' oder 'document.getElementById()' und setzen Sie '.innerText' auf Ihren' analysierten [0] 'Wert. – Soviut

+0

Ah, ich verstehe. Ich dachte, 'document.write()' wäre am besten, da ich die 'dict'-Werte verwenden werde, um neue HTML-Elemente zu erstellen. –

+1

Normalerweise würden Sie nur Daten in der JSON-Datei speichern und dann mit Soviut

3

Indem Sie data in einfache Anführungszeichen setzen, erstellen Sie eine Zeichenfolge. Um Python-Datentypen in JavaScript zu konvertieren, serialisieren Sie sie mit {{ data | tojson }}.

Eventuell müssen Sie den Ausgang mit safe filtern. Weitere Informationen finden Sie unter sending data as JSON object from Python to Javascript with Jinja

+0

Yup! Vielen Dank. –

Verwandte Themen