JavaScript使用Jinja模板中呈现的数据引发SyntaxError [英] JavaScript raises SyntaxError with data rendered in Jinja template

问题描述

我正在尝试将数据作为JSON从Flask路由传递到呈现JavaScript的Jinja模板。我想使用JavaScript迭代数据。浏览器显示 SyntaxError：Unexpected token'&'。在渲染数据上调用 JSON.parse 时，预期属性名称。。如何在JavaScript中使用渲染的JSON数据？

I am trying to pass data as JSON from a Flask route to a Jinja template rendering JavaScript. I want to iterate over the data using JavaScript. The browser shows SyntaxError: Unexpected token '&'. Expected a property name. when JSON.parse is called on the rendered data. How do I use rendered JSON data in JavaScript?

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)

如果我只是在HTML部分中放入 {{data}} ，我看到的内容看起来是正确的。

If I just put {{ data }} in the HTML part, what I see looks correct.

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

推荐答案

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

Flask's Jinja environment automatically escapes data rendered in HTML templates. This is to avoid security issues if the dev tries to render untrusted user input.

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

Since you are passing a Python object to be treated as JSON, Flask provides the tojson filter which automatically dumps the data to JSON and marks it safe.

return render_template('tree.html', tree=tree)

var tree = {{ tree|tojson }};

当您查看HTML中呈现的数据时，它看起来是正确的，因为浏览器显示转义的符号作为真正的符号（虽然在这种情况下你看到的是Python字典的字符串表示，而不是JSON，所以仍然存在一些问题，比如 u 标记）。

When you just look at the data rendered in HTML, it looks correct because the browser displays the escaped symbols as the real symbols (although in this case you're seeing the string representation of a Python dict, not JSON, so there's still some issues like u markers).

以前版本的Flask没有标记转储数据的安全性，因此您可能会遇到像 {{tree | tojson | safe}} ，这不再是必需的。

Previous versions of Flask didn't mark the dumped data safe, so you might come across examples like {{ tree|tojson|safe }}, which isn't required anymore.

如果你没有渲染JSON（或者你已经抛弃了JSON到字符串），你可以告诉Jinja使用 safe 过滤器，可以安全地呈现数据而无需转义。

If you're not rendering JSON (or you already dumped the JSON to a string), you can tell Jinja that data is safe to render without escaping by using the safe filter.

# already dumped to json, so tojson would double-encode it
return render_template('tree.html', tree=json.dumps(tree))

var tree = {{ tree|safe }};

您还可以将字符串换行在标记在渲染之前，它相当于 safe 过滤器。

You can also wrap the string in Markup before rendering it, it's equivalent to the safe filter.

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

var tree = {{ tree }};

---

如果你没有将这些数据传递给JavaScript ，但在Jinja中使用它，你不需要JSON。传递实际的Python数据，不要在其上调用 tojson ，并像使用模板中的任何其他数据一样使用它。

---

If you're not passing this data to JavaScript, but using it in Jinja instead, you don't need JSON. Pass the actual Python data, don't call tojson on it, and use it as you would any other data in the template.

return render_template('tree.html', tree=tree)

{% for item in tree %}
    <li>{{ item }}</li>
{% endfor %}

这篇关于JavaScript使用Jinja模板中呈现的数据引发SyntaxError的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！