[解決済み] PythonからJinja2を使ってJavaScriptにリストを渡す方法

質問

Pythonの変数があるとします。

list_of_items = ['1','2','3','4','5']

という関数があり、HTMLをレンダリングしてJinjaに渡しているのですが、JavaScriptでも somefunction(variable) . の各項目を渡そうとしているのですが list_of_items . 私はこのようなものを試してみました。

{% for item in list_of_items %}
<span onclick="somefunction({{item}})">{{item}}</span><br>
{% endfor %}

PythonからJavaScriptにリストを渡すことは可能ですか？それとも、ループでリストの各項目を1つずつ渡すべきですか？どうすればいいのでしょうか？

どのように解決するのですか？

javascriptのコードにコンテキストデータを渡すには、javascriptが理解できる方法でシリアライズする必要があります（つまりJSON）。また、このデータを安全なものとしてマークするには safe Jinjaフィルターを使って、データがhtmlescapedされるのを防ぐために、安全であるとマークする必要もあります。

というようなことをすれば実現できます。

ビュー

import json

@app.route('/')
def my_view():
    data = [1, 'foo']
    return render_template('index.html', data=json.dumps(data))

テンプレート

<script type="text/javascript">
    function test_func(data) {
        console.log(data);
    }
    test_func({{ data|safe }})
</script>

編集 - 正確な答え

ですから、あなたが望むこと（アイテムのリスト上でループし、それらをjavascript関数に渡す）を正確に達成するためには、リスト内の各アイテムを別々にシリアライズする必要があります。あなたのコードは次のようになります。

ビュー

import json

@app.route('/')
def my_view():
    data = [1, "foo"]
    return render_template('index.html', data=map(json.dumps, data))

テンプレート

{% for item in data %}
    <span onclick=someFunction({{ item|safe }});>{{ item }}</span>
{% endfor %}

編集2

この例では Flask

あなたがどのようなフレームワークを使用しているかは知りませんが、アイデアを得たのですから、使用するフレームワークに適合するようにすればよいのです。

編集3 (セキュリティ警告)

ユーザが提供したデータでこれを行うことは決してありません。信頼できるデータでのみ行ってください!

さもなければ、あなたのアプリケーションをXSSの脆弱性にさらしてしまうことになります!