JavaScript用Jinja模板中呈现的数据引发SyntaxError

Question

我试图将数据作为JSON从Flask路由传递到呈现JavaScript的Jinja模板。我想使用JavaScript遍历数据。浏览器显示SyntaxError: Unexpected token '&'. Expected a property name.何时JSON.parse对渲染的数据进行调用。如何在JavaScript中使用呈现的JSON数据？

var obj = JSON.parse({{ data }})
for (i in obj){
   document.write(obj[i].text + "<br />");
}
def get_nodes(node):
    d = {}
    if node == "Root":
        d["text"] = node
    else:
        d["text"] = node.name

    getchildren = get_children(node)
    if getchildren:
        d["nodes"] = [get_nodes(child) for child in getchildren]
    return d

tree = get_nodes("Root")
return render_template("folder.html", data=tree)

如果我只放入{{ data }}HTML部分，那么我所看到的看起来是正确的。

{'text': 'Root', 'nodes': [{'text': u'Prosjekt3'}, {'text': u'Prosjekt4', 'nodes': [{'text': u'mappe8'}]}]}

Answer 1

Flask的Jinja环境会自动转义HTML模板中呈现的数据。如果开发人员尝试呈现不受信任的用户输入，这将避免安全问题。

由于要传递的Python对象被视为JSON，因此Flask提供了tojson过滤器，该过滤器会自动将数据转储到JSON并将其标记为安全。

return render_template('tree.html', tree=tree)
var tree = {{ tree|tojson }};

当你仅查看HTML呈现的数据时，它看起来是正确的，因为浏览器将转义的符号显示为真实符号（尽管在这种情况下，你看到的是Python dict的字符串表示形式，而不是JSON，因此仍然存在一些问题像u标记）。

以前版本的Flask并未将转储的数据标记为安全，因此你可能会遇到像这样的示例{{ tree|tojson|safe }}，现在不再需要。

如果你不渲染JSON（或者你已经将JSON转储到字符串中），则可以通过使用safe过滤器来告诉Jinja数据可以安全地渲染而无需转义。

# already dumped to json, so tojson would double-encode it
return render_template('tree.html', tree=json.dumps(tree))
var tree = {{ tree|safe }};

你还可以Markup在渲染字符串之前将其包装起来，这等效于safe过滤器。

# already dumped and marked safe
return render_template('tree.html', tree=Markup(json.dumps(tree)))
var tree = {{ tree }};

如果你不将此数据传递给JavaScript，而是在Jinja中使用它，则不需要JSON。传递实际的Python数据，不要调用tojson它，并像使用模板中的其他任何数据一样使用它。

return render_template('tree.html', tree=tree)
{% for item in tree %}
    <li>{{ item }}</li>
{% endfor %}