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

Question

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

我正在尝试将数据作为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

烧瓶的Jinja环境自动转义HTML模板中呈现的数据。这是为了避免在dev尝试呈现不受信任的用户输入时出现安全问题。由于您要传递一个Python对象作为JSON来处理，所以Flask提供了tojson过滤器，它自动将数据转储到JSON并将其标记为安全。return&nbsp;render_template('tree.html',&nbsp;tree=tree)var&nbsp;tree&nbsp;=&nbsp;{{&nbsp;tree|tojson&nbsp;}};当您只查看以HTML呈现的数据时，它看起来是正确的，因为浏览器将转义符号显示为真正的符号(虽然在本例中，您看到的是Pythondict的字符串表示，而不是JSON，所以仍然存在一些问题，如u标记)。以前版本的Flask没有标记转储数据安全，所以您可能会遇到这样的例子{{ tree|tojson|safe }}，这不再是必需的了。如果您没有呈现JSON(或者您已经将JSON转储到一个字符串中)，您可以告诉Jinja使用safe过滤器。#&nbsp;already&nbsp;dumped&nbsp;to&nbsp;json,&nbsp;so&nbsp;tojson&nbsp;would&nbsp;double-encode&nbsp;itreturn&nbsp;render_template('tree.html',&nbsp;tree=json.dumps(tree))var&nbsp;tree&nbsp;=&nbsp;{{&nbsp;tree|safe&nbsp;}};您也可以将字符串包装在Markup在呈现之前，它相当于safe过滤器。#&nbsp;already&nbsp;dumped&nbsp;and&nbsp;marked&nbsp;safereturn&nbsp;render_template('tree.html',&nbsp;tree=Markup(json.dumps(tree)))var&nbsp;tree&nbsp;=&nbsp;{{&nbsp;tree&nbsp;}};如果不是将数据传递给JavaScript，而是在Jinja中使用数据，则不需要JSON。传递实际Python数据，不要调用tojson并将其作为模板中的任何其他数据使用。return&nbsp;render_template('tree.html',&nbsp;tree=tree){%&nbsp;for&nbsp;item&nbsp;in&nbsp;tree&nbsp;%}&nbsp;&nbsp;&nbsp;&nbsp;<li>{{&nbsp;item&nbsp;}}</li>{%&nbsp;endfor&nbsp;%}

Answer 2

问题是您的服务器返回的不是JSON，而是呈现的HTML，它用&Notation转义了一些符号。而不是使用return&nbsp;render_template("folder.html",&nbsp;data=tree)试一试return&nbsp;flask.jsonify(**tree)