Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>You can use <code>{{ variable }}</code> anywhere in your template, not just in the HTML part. So this should work:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;script&gt; var someJavaScriptVar = '{{ geocode[1] }}'; &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt;Hello World&lt;/p&gt; &lt;button onclick="alert('Geocode: {{ geocode[0] }} ' + someJavaScriptVar)" /&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>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:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;script&gt; var myGeocode = ['{{ geocode[0] }}', '{{ geocode[1] }}']; &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt;Hello World&lt;/p&gt; &lt;button onclick="alert('Geocode: ' + myGeocode[0] + ' ' + myGeocode[1])" /&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Jinja also offers more advanced constructs from Python, so you can shorten it to:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;script&gt; var myGeocode = [{{ ', '.join(geocode) }}]; &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt;Hello World&lt;/p&gt; &lt;button onclick="alert('Geocode: ' + myGeocode[0] + ' ' + myGeocode[1])" /&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>You can also use <code>for</code> loops, <code>if</code> statements and many more, see the <a href="http://jinja.pocoo.org/docs/" rel="nofollow noreferrer">Jinja2 documentation</a> for more. </p> <p>Also have a look at ford's answer who points out the <a href="http://flask.pocoo.org/docs/0.10/templating/#standard-filters" rel="nofollow noreferrer"><code>tojson</code></a> filter which is an addition to <a href="http://jinja.pocoo.org/docs/dev/templates/#builtin-filters" rel="nofollow noreferrer">Jinja2's standard set of filters</a>.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload