Question

我知道如何使用{{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]。

Answer 1

将data放在单引号中即可创建字符串。要将python数据类型转换为JavaScript，请使用{{ data | tojson }}序列化它们。

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

您可能需要使用safe过滤器转义输出。请点击sending data as JSON object from Python to Javascript with Jinja

了解更多信息

Answer 2

知道了！

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

输出[object Object]，即该位置的字典。因此，您需要做的就是document.write(parsed[0].name);访问其name值！

python - 在javascript Flask中传递dict列表

2 个答案: