Jinja でレンダリングされた JSON データを解析する際の JavaScript の SyntaxError を解決するにはどうすればよいですか?

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

Flask ルートから Jinja テンプレートにデータを JSON として渡し、JavaScript を使用してそれを反復処理しようとすると、 「SyntaxError: Unexpected token '&'」が発生する可能性があります。このエラーは、レンダリングされたデータに対して JSON.parse が呼び出されたときに発生します。

問題

この問題は、セキュリティ対策として HTML テンプレートでレンダリングされたデータを自動的にエスケープする Flask の Jinja 環境に起因します。このエスケープされたデータを JavaScript で JSON として使用しようとすると、構文エラーが発生します。

解決策: tojson フィルターの使用

この問題を解決するために、Flask は tojson フィルターを提供します。このフィルタは、Python データを自動的に JSON にダンプし、JavaScript でレンダリングしても安全であるとマークします。

例:

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

var tree = {{ tree|tojson }};

代替ソリューション

金庫の使用フィルター:

JSON をレンダリングしない場合、安全なフィルターを使用して、Jinja がデータをエスケープするのを防ぐことができます。

例:

var tree = {{ tree|safe }};

マークアップの使用:

データレンダリング前にマークアップでラップすることもできます。これは、安全なフィルターを使用するのと同じです。

例:

var tree = {{ tree }};

JavaScript の代わりに Jinja にデータを渡す

データが JavaScript の使用を目的としたものではなく、Jinja を目的としたものである場合、tojson フィルターは必要ありません。 Python データを直接渡し、テンプレート内の他のデータとして使用します。

例:

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

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

以上がJinja でレンダリングされた JSON データを解析する際の JavaScript の SyntaxError を解決するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。