Explore our sites

Stack Exchange
tour help careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 13 down vote favorite
10

I am using Flask for a small personal project. Said project makes a call to an API that then 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.

Below is some example code.

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)

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 view?

share|improve this question
add comment

1 Answer

up vote 14 down vote accepted

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

share|improve this answer
 
Much obliged, mensi! That was my initial thought but the documentation for Flask doesn't make it readily clear that you can use the {{var}} form in JS as well. Thanks for clearing that up. –  mea Jun 24 '12 at 15:13
1  
@mea: you can also use the template engine to generate arbitrary text-based files, I have also used it to dynamically generate TeX files (-> PDF) and email, it's quite versatile ;) –  mensi Jun 24 '12 at 15:17
 
quick follow up question: if I do a for loop in JS, can I use the index variable within the python variable e.g. {{geocode[i]}} ? –  mea Jun 25 '12 at 15:51
 
@mea updated answer to reflect your follow up question –  mensi Jun 25 '12 at 16:22
1  
That makes sense, but the solution you posted seems to require me to hand-code in the contents of the JS array. I was hoping I could do it more programmatically such that I could pass a Python list of variable length and a JS for loop could iterate over the length and then append them to the JS array. Sorry if I am not making myself clear enough, but I am rather green to JS and web dev. –  mea Jun 25 '12 at 16:40
show 4 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.