python - 在javascript Flask中传递dict列表答案

【问题标题】：python - passing a list of dict in javascript Flaskpython - 在javascript Flask中传递dict列表
【发布时间】：2017-12-21 07:11:20
【问题描述】：

我知道如何使用{{data}} 将变量从 Flask (python) 传递到我的模板 html 文件。但是，我无法访问 javascript 列表中的每个字典元素及其各自的键值对。

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]。

【问题讨论】：

标签： javascript python dictionary flask

【解决方案1】：

知道了！

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

输出[object Object]，这是该位置的字典。那么你需要做的就是document.write(parsed[0].name); 来访问它的name 值！

【讨论】：

不要使用document.write()；您经常会收到来自浏览器的警告。使用document.querySelector() 或document.getElementById() 并将它的.innerText 设置为您的parsed[0] 值。
啊，我明白了。我认为document.write() 是最好的，因为我将使用dict 值来创建新的html 元素。
通常你只在 json 中存储数据，然后循环使用 document.createElement() 来创建元素

【解决方案2】：

通过将data 放在单引号中，您正在创建一个字符串。要将 python 数据类型导入 JavaScript，请使用 {{ data | tojson }} 对其进行序列化。

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

您可能需要使用safe 过滤器转义输出。更多信息请访问sending data as JSON object from Python to Javascript with Jinja

【讨论】：

是的！谢谢。
single quotes 是重要的部分！