Pourquoi mon JavaScript obtient-il une SyntaxError lors du rendu des données JSON à partir d'un modèle Jinja ?

JavaScript déclenche une erreur de syntaxe avec les données rendues dans le modèle Jinja

Introduction

Lors de la transmission de données JSON d'une route Flask vers un modèle Jinja, le navigateur peut lancez une SyntaxError : jeton inattendu '&'. Attendu un nom de propriété lors du rendu des données. Comprendre comment gérer les données JSON rendues en JavaScript est crucial pour une gestion réussie des modèles.

Échappement et rendu JSON

L'environnement Jinja de Flask échappe automatiquement aux données rendues dans les modèles HTML pour éviter les failles de sécurité. Pour les données qui doivent être traitées comme JSON, Flask fournit le filtre tojson, qui transfère les données vers JSON et les marque comme sûres. L'utilisation du filtre tojson garantit que les données sont restituées sans s'échapper, ce qui leur permet d'être analysées correctement en JavaScript.

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

var tree = {{ tree|tojson }};

Alternativement, dans les anciennes versions de Flask, le filtre sécurisé peut être utilisé pour marquer le données comme sûres :

var tree = {{ tree|tojson|safe }};

Utilisation de filtres sécurisés

Si les données ont déjà été vidées vers JSON, le filtre sécurisé peut être utilisé pour le marquer comme sûr pour le rendu sans s'échapper :

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

var tree = {{ tree|safe }};

Envelopper la chaîne JSON dans le balisage équivaut également à utiliser le filtre sécurisé :

return render_template('tree.html', tree=Markup(json.dumps(tree)))

var tree = {{ tree }};

Utilisation des données Python dans Jinja

Si les données ne sont pas transmises à JavaScript mais utilisées dans Jinja, vous peut omettre le rendu JSON et utiliser directement les données Python :

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!