python - javascriptでdictのリストを渡すFlask

Flask（python）の変数を{{data}}というテンプレートのhtmlファイルに渡す方法を知っています。しかし、私は、各辞書要素とそのそれぞれのキーと値のペアをjavascriptのリストにアクセスするのに問題があります。python - javascriptでdictのリストを渡すFlask

start.py

def func1(): 
     data = filter() #returns a list of dictionaries 

    return render_template("template1.html", data=data)

template1.html

<html> 
    <head> 
    ..... 
    </head> 
    <body> 
    <p>This is html: {{data}}</p> 

    <script type="text/javascript" src="{{url_for('static', filename='js/add.js') }}"></script> 
    <script type="text/javascript"> 
    myvar = '{{data}}'; 
    document.write(myvar); 

    </script> 
    </body> 

</html>

add.js

//code to be written here

myvarとThis is html:は、両方とも辞書リスト全体を出力します。私はすでにmyvar[0]を試しましたが、それは何らかの理由で[を出力するだけです。私もやった：

myvar = '{{data|tojson}}'; 
var parsed = JSON.parse(myvar); 
document.write(parsed[0]);

しかし、出力は[object Object]です。

出典

2017-07-16 Jeffrey Phung

myvar = '{{data|tojson}}'; 
var parsed = JSON.parse(myvar); 
document.write(parsed[0]);

この位置に辞書であるを出力します。したがって、name値にアクセスするには、document.write(parsed[0].name);を実行するだけです。

出典

2017-07-16 19:44:19

'document.write（）'は使わないでください。あなたはそれについてブラウザから警告を受けることがよくあります。 'document.querySelector（）'または 'document.getElementById（）'を使って '.innerText'をあなたの' parsed [0] 'の値に設定してください。 – Soviut

ああ、そうだ。 'dict'値を使って新しいhtml要素を作成するので、' document.write（） 'がベストであると思いました。 –

通常、データをjsonに格納し、それをループして 'document.createElement（）'を使って要素を作成します。 – Soviut

dataを一重引用符で囲むと、文字列が作成されます。 Pythonのデータ型をJavaScriptに変換するには、{{ data | tojson }}でシリアル化します。

var parsed = JSON.parse('{{data | tojson}}');

出力をsafeフィルタでエスケープする必要がある場合があります。もっと見る：sending data as JSON object from Python to Javascript with Jinja

出典

2017-07-16 19:45:54 krassowski

Yup！ありがとうございました。 –

python - javascriptでdictのリストを渡すFlask

答えて

関連する問題