JavaScript raises SyntaxError with data rendered in Jinja template

by

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

More Related Contents:

  1. Display data streamed from a Flask view as it updates
  2. How can I pass data from Flask to JavaScript in a template?
  3. Flask – Calling python function on button OnClick event
  4. Pass parameter with Python Flask in external Javascript
  5. Rendering to JS with Jinja produces invalid number rather than string
  6. Pass JavaScript variable to Flask url_for
  7. Update and render a value from Flask periodically
  8. Display the contents of a log file as it is updated
  9. Javascript – No ‘Access-Control-Allow-Origin’ header is present on the requested resource
  10. Solve Cross Origin Resource Sharing with Flask
  11. How can I pass parameter through serialization and then parse them using external JavaScript?
  12. Unable to pass jinja2 variables into javascript snippet
  13. Flask Dynamic data update without reload page
  14. Passing variables from Flask to JavaScript
  15. Get data from html and and pass the data back to the front end using ajax or js
  16. Python Flask Cors Issue
  17. Can a website detect when you are using Selenium with chromedriver?
  18. scrape html generated by javascript with python
  19. Headless Browser for Python (Javascript support REQUIRED!) [closed]
  20. Retrieving binary file content using Javascript, base64 encode it and reverse-decode it using Python
  21. ElementClickInterceptedException: Message: element click intercepted Element is not clickable error clicking a radio button using Selenium and Python
  22. How do I call a Javascript function from Python?
  23. Understanding execute async script in Selenium
  24. Parse the JavaScript returned from BeautifulSoup
  25. Is there any way to download csv file from “website button click” using Python?
  26. Make Javascript do List Comprehension
  27. Return data from html/js to python
  28. How to use the variables from “views.py” in JavasScript, “” in Django Template?
  29. sending data as JSON object from Python to Javascript with Jinja [duplicate]
  30. How do I download a file from FastAPI backend using JavaScript Fetch API in the frontend?

Leave a Comment