python - JavaScript raises SyntaxError with data rendered in Jinja template - Stack Overflow

admin管理员组

文章数量:1201789

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)

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'}]}]}

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)

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'}]}]}

• javascript
• python
• flask

Share Improve this question Follow edited Jul 13, 2018 at 14:06 davidism 127k3030 gold badges415415 silver badges347347 bronze badges asked Feb 22, 2016 at 13:51 EspenGEspenG 53733 gold badges1010 silver badges2121 bronze badges 0

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 26

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.

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 }};

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).

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.

---

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 }};

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 }};

---

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

I could archive it using the following code sample.

<script>
    console.log(JSON.parse({{json|safe}}))
</script>

The problem is that your server returns not JSON, but rendered HTML, which escapes some of the symbols with & notation.

Instead of using

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

try

return flask.jsonify(**tree)

本文标签： pythonJavaScript raises SyntaxError with data rendered in Jinja templateStack Overflow