How can I pass data from Flask to JavaScript in a template?

by

You can use {{ variable }} anywhere in your template, not just in the HTML part. So this should work:

<html>
<head>
  <script>
    var someJavaScriptVar="{{ geocode[1] }}";
  </script>
</head>
<body>
  <p>Hello World</p>
  <button onclick="alert('Geocode: {{ geocode[0] }} ' + someJavaScriptVar)" />
</body>
</html>

Think of it as a two-stage process: First, Jinja (the template engine Flask uses) generates your text output. This gets sent to the user who executes the JavaScript he sees. If you want your Flask variable to be available in JavaScript as an array, you have to generate an array definition in your output:

<html>
  <head>
    <script>
      var myGeocode = ['{{ geocode[0] }}', '{{ geocode[1] }}'];
    </script>
  </head>
  <body>
    <p>Hello World</p>
    <button onclick="alert('Geocode: ' + myGeocode[0] + ' ' + myGeocode[1])" />
  </body>
</html>

Jinja also offers more advanced constructs from Python, so you can shorten it to:

<html>
<head>
  <script>
    var myGeocode = [{{ ', '.join(geocode) }}];
  </script>
</head>
<body>
  <p>Hello World</p>
  <button onclick="alert('Geocode: ' + myGeocode[0] + ' ' + myGeocode[1])" />
</body>
</html>

You can also use for loops, if statements and many more, see the Jinja2 documentation for more.

Also, have a look at Ford’s answer who points out the tojson filter which is an addition to Jinja2’s standard set of filters.

Edit Nov 2018: tojson is now included in Jinja2’s standard set of filters.

More Related Contents:

  1. Rendering to JS with Jinja produces invalid number rather than string
  2. Pass JavaScript variable to Flask url_for
  3. Update and render a value from Flask periodically
  4. Unable to pass jinja2 variables into javascript snippet
  5. Flask Dynamic data update without reload page
  6. JavaScript raises SyntaxError with data rendered in Jinja template
  7. Display data streamed from a Flask view as it updates
  8. Flask – Calling python function on button OnClick event
  9. Pass parameter with Python Flask in external Javascript
  10. Display the contents of a log file as it is updated
  11. Javascript – No ‘Access-Control-Allow-Origin’ header is present on the requested resource
  12. Solve Cross Origin Resource Sharing with Flask
  13. How to pass a list from Python, by Jinja2 to JavaScript
  14. How can I pass parameter through serialization and then parse them using external JavaScript?
  15. Passing variables from Flask to JavaScript
  16. sending data as JSON object from Python to Javascript with Jinja [duplicate]
  17. Get data from html and and pass the data back to the front end using ajax or js
  18. Python Flask Cors Issue
  19. Can a website detect when you are using Selenium with chromedriver?
  20. Can scrapy be used to scrape dynamic content from websites that are using AJAX?
  21. Reference template variable within Jinja expression
  22. JSON datetime between Python and JavaScript
  23. scrape html generated by javascript with python
  24. Retrieving binary file content using Javascript, base64 encode it and reverse-decode it using Python
  25. ElementClickInterceptedException: Message: element click intercepted Element is not clickable error clicking a radio button using Selenium and Python
  26. Understanding execute async script in Selenium
  27. Parse the JavaScript returned from BeautifulSoup
  28. Is there any way to download csv file from “website button click” using Python?
  29. What’s different between Python and Javascript regular expressions?
  30. How to set up Python server side with javascript client side

Leave a Comment