蟒蛇 - 在javascript中傳遞字典列表Flask

我知道如何將一個變量從Flask（python）傳遞給我的模板html文件，其中{{data}}。然而，我無法訪問javascript中列表中的每個字典元素及其各自的鍵值對。蟒蛇 - 在javascript中傳遞字典列表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

Got it！

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

輸出[object Object]這是該位置的字典。那麼你需要做的就是document.write(parsed[0].name);來訪問它的name價值！

來源

2017-07-16 19:44:19

不要使用'document.write（）';你經常會從瀏覽器得到關於它的警告。使用'document.querySelector（）'或'document.getElementById（）'並將'.innerText'設置爲你的'parsed [0]'值。 – Soviut

啊，我明白了。我認爲'document.write（）'是最好的，因爲我將使用'dict'值來創建新的html元素。 –

通常你只需將數據存儲在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

就可以創建元素了！謝謝。 –

蟒蛇 - 在javascript中傳遞字典列表Flask

回答

相關問題