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

Question

我试图将数据作为JSON从Flask路由传递到Jinja模板呈现JavaScript.我想使用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字典的字符串表示,而不是JSON,所以仍然存在一些问题像u标记).

以前版本的Flask没有标记转储数据的安全性,因此您可能会遇到类似的示例{{ tree|tojson|safe }},这些不再需要.

如果您没有渲染JSON(或者您已经将JSON转储到字符串中),您可以告诉Jinja,使用safe过滤器可以安全地渲染数据而无需转义.

# 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 %}