Jinja テンプレートから JSON データをレンダリングするときに JavaScript で SyntaxError が発生するのはなぜですか?

Jinja テンプレートでレンダリングされたデータで JavaScript が SyntaxError を発生させる

はじめに

JSON データを Flask ルートから Jinja テンプレートに渡すとき、ブラウザーはSyntaxError: Unexpected token '&' をスローします。データをレンダリングするときにプロパティ名が必要です。 JavaScript でレンダリングされた JSON データを処理する方法を理解することは、テンプレートの処理を成功させるために非常に重要です。

エスケープと JSON レンダリング

Flask の Jinja 環境は、セキュリティの脆弱性を防ぐために、HTML テンプレートでレンダリングされたデータを自動的にエスケープします。 JSON として扱う必要があるデータの場合、Flask はデータを JSON にダンプし、安全であるとマークする tojson フィルターを提供します。 tojson フィルターを使用すると、データがエスケープせずにレンダリングされ、JavaScript で正しく解析できるようになります。

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

var tree = {{ tree|tojson }};

あるいは、古い Flask バージョンでは、安全なフィルターを使用して、データを安全なものとして:

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

安全なフィルターを使用

データが安全である場合がすでに JSON にダンプされている場合は、安全なフィルターを使用して、エスケープせずにレンダリングしても安全であるとマークすることができます:

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

var tree = {{ tree|safe }};

マークアップで JSON 文字列をラップすることも、安全なフィルターを使用することと同じです。

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

var tree = {{ tree }};

Jinja での Python データの使用

データがJavaScript には渡されず、Jinja で使用されるため、JSON レンダリングを省略して Python データを直接使用できます:

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

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

以上がJinja テンプレートから JSON データをレンダリングするときに JavaScript で SyntaxError が発生するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。