logo标签列表

Python - 在JavaScript Flask中传递字典列表

javascriptpythondictionaryflask
7
我知道如何使用{{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]。
2个回答
14

将data放在单引号中，即可创建一个字符串。若要将Python数据类型传输到JavaScript，请使用{{ data | tojson }}进行序列化。

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

您可能需要使用safe过滤器来转义输出。更多信息请参见使用Jinja将数据作为JSON对象从Python发送到JavaScript

1
单引号是重要的部分！ - RaphaMex
1

明白了！

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

输出位置上的字典，格式为[object Object]。因此，您只需要使用document.write(parsed[0].name);来访问其name值！

2
不要使用document.write()；你经常会收到浏览器的警告。使用document.querySelector()或document.getElementById()，并将它的.innerText设置为你的parsed[0]值。 - Soviut
啊，我明白了。我认为 document.write() 是最好的选择，因为我将使用 dict 的值来创建新的 html 元素。 - LeggoMaEggo
1
通常情况下，您只需在JSON中存储数据，然后使用document.createElement()循环创建元素。 - Soviut
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接