Jinja テンプレートで JSON を解析するときに発生する「SyntaxError: Unexpected token '&'」を解決する方法

Jinja テンプレートで JSON データをレンダリングするときの JavaScript SyntaxError の解決

Jinja テンプレートでレンダリングされた JavaScript コードを通じて JSON データを反復処理しようとすると、「SyntaxError」が発生する場合があります。 : JSON.parse() の呼び出し時に予期しないトークン '&' エラーが発生しました。このエラーは、HTML テンプレートでレンダリングするときに Flask の Jinja 環境によるデータの自動エスケープが原因で発生します。

解決策: tojson フィルターを使用します

このエスケープ プロセスを防止し、JavaScript でデータを JSON として処理するには, Flask は tojson フィルターを提供します。 Python オブジェクトを JSON に変換し、テンプレートでレンダリングしても安全であるとマークします。

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

<script>
  var tree = {{ tree|tojson }};
</script>

非 JSON データの処理

JSON データを扱っていない場合、またはすでに文字列に変換されている場合は、安全なフィルターを使用するか、文字列をマークアップでラップして、文字列を防ぐことができます。エスケープ:

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

<script>
  var tree = {{ tree|safe }};
  // or
  var tree = {{ Markup(json.dumps(tree)) }};
</script>

生データの受け渡し

データを JavaScript に渡すのではなく、Jinja テンプレート自体内で使用する場合は、tojson フィルターを省略して次を使用できます。生の Python データを直接使用します。

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

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

これらの手法を実装することで、レンダリングされた JSON を効果的に使用できます。 SyntaxError の問題が発生することなく、JavaScript でデータを作成できます。

以上がJinja テンプレートで JSON を解析するときに発生する「SyntaxError: Unexpected token '&'」を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。