My app makes a call to an API that returns a dictionary. I want to pass information from this dict to JavaScript in the view. I am using the Google Maps API in the JS, specifically, so I’d like to pass it a list of tuples with the long/lat information. I know that render_template
will pass these variables to the view so they can be used in HTML, but how could I pass them to JavaScript in the template?
from flask import Flask from flask import render_template app = Flask(__name__) import foo_api api = foo_api.API('API KEY') @app.route('/') def get_data(): events = api.call(get_event, arg0, arg1) geocode = event['latitude'], event['longitude'] return render_template('get_data.html', geocode=geocode)
Advertisement
Answer
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.