How to Avoid JSON Syntax Errors When Passing Data from Flask to JavaScript?

Passing Data from Flask to JavaScript: Handling JSON Syntax Errors

In an attempt to pass JSON data from a Flask route to a Jinja template, you may encounter a SyntaxError when calling JSON.parse on the rendered data. This error typically occurs when JSON characters are escaped during rendering.

To address this issue, Flask offers the tojson filter. When applied to data, it automatically dumps the Python object into JSON and marks it as safe for rendering.

Here's an example:

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

<script>
    var tree = {{ tree|tojson }};
</script>

Filters for Special Cases

If JSON has already been dumped to a string, you can use the safe filter or wrap the string in Markup before rendering.

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

<script>
    var tree = {{ tree|safe }};
</script>

Alternative Approach for Jinja Usage

In case you're working with the data directly in Jinja without passing it to JavaScript, you don't need JSON. Simply pass the actual Python data without calling tojson.

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

The above is the detailed content of How to Avoid JSON Syntax Errors When Passing Data from Flask to JavaScript?. For more information, please follow other related articles on the PHP Chinese website!