JavaScript löst SyntaxError mit Daten aus, die in der Jinja-Vorlage gerendert werden

Ich versuche, Daten als JSON von einer Flask-Route an eine Jinja-Vorlage zu übergeben, die JavaScript rendert. Ich möchte die Daten mit JavaScript durchlaufen. Der Browser zeigt SyntaxError: Unexpected token '&'. Expected a property name. wann JSON.parse wird auf den gerenderten Daten aufgerufen. Wie verwende ich gerenderte JSON-Daten in JavaScript?

var obj = JSON.parse({{ data }})
for (i in obj){
   document.write(obj[i].text + "<br />");
}

def get_nodes(node):
    d = {}
    if node == "Root":
        d["text"] = node
    else:
        d["text"] = node.name

    getchildren = get_children(node)
    if getchildren:
        d["nodes"] = [get_nodes(child) for child in getchildren]
    return d

tree = get_nodes("Root")
return render_template("folder.html", data=tree)

Wenn ich nur setzen {{ data }} im HTML-Teil sieht das, was ich sehe, korrekt aus.

{'text': 'Root', 'nodes': [{'text': u'Prosjekt3'}, {'text': u'Prosjekt4', 'nodes': [{'text': u'mappe8'}]}]}

Die Jinja-Umgebung von Flask maskiert automatisch Daten, die in HTML-Vorlagen gerendert werden. Dies soll Sicherheitsprobleme vermeiden, wenn der Entwickler versucht, nicht vertrauenswürdige Benutzereingaben zu rendern.

Da Sie ein Python-Objekt übergeben, das als JSON behandelt werden soll, stellt Flask die tojson Filter, der die Daten automatisch in JSON ablegt und als sicher markiert.

return render_template('tree.html', tree=tree)

var tree = {{ tree|tojson }};

Wenn Sie sich nur die in HTML gerenderten Daten ansehen, sieht es korrekt aus, da der Browser die maskierten Symbole als echte Symbole anzeigt (obwohl Sie in diesem Fall die Zeichenfolgendarstellung eines Python-Diktats sehen, nicht JSON, sodass es immer noch einige Probleme gibt wie u Markierungen).

Frühere Versionen von Flask haben die abgelegten Daten nicht als sicher markiert, daher stoßen Sie möglicherweise auf Beispiele wie {{ tree|tojson|safe }}was nicht mehr benötigt wird.

Wenn Sie JSON nicht rendern (oder den JSON bereits in eine Zeichenfolge ausgegeben haben), können Sie Jinja mitteilen, dass die Daten sicher gerendert werden können, ohne zu maskieren, indem Sie die verwenden safe Filter.

# already dumped to json, so tojson would double-encode it
return render_template('tree.html', tree=json.dumps(tree))

var tree = {{ tree|safe }};

Sie können die Schnur auch einwickeln Markup vor dem Rendern entspricht es dem safe Filter.

# already dumped and marked safe
return render_template('tree.html', tree=Markup(json.dumps(tree)))

var tree = {{ tree }};

Wenn Sie diese Daten nicht an JavaScript übergeben, sondern stattdessen in Jinja verwenden, benötigen Sie kein JSON. Übergeben Sie die eigentlichen Python-Daten, rufen Sie nicht auf tojson darauf und verwenden Sie es wie alle anderen Daten in der Vorlage.

return render_template('tree.html', tree=tree)

{% for item in tree %}
    <li>{{ item }}</li>
{% endfor %}

Ich könnte es mit dem folgenden Codebeispiel archivieren.

<script>
    console.log(JSON.parse({{json|safe}}))
</script>

Das Problem ist, dass Ihr Server nicht JSON zurückgibt, sondern gerendertes HTML, das einige der Symbole mit &-Notation maskiert.

Anstatt zu verwenden

return render_template("folder.html", data=tree)

Versuchen

return flask.jsonify(**tree)