CODEWITHSUNDEEP
javascriptflask
Ben Mayo
Ben Mayo

Reputation: 1315

Pass Flask variable into Javascript

I'm have a Flask website with a OpenLayers (javascript) web map. I'm trying to lookup an address to lat and lon coordinates, and then have the map render itself at that location.

So at it's most basic, I'm trying to pass the result of an Flask sql query into some javascript, and then action that javascript.

Let's forget about rendering the map, and just try to get the lat/lon output displaying in javascript on the webpage

I get the coordinates as an array with Python:

def lookUpPostcode(postcode):
    latLon = [0,0]
    cur.execute("SELECT * from PostCodeToBNG WHERE postcode = %s limit 1",(postcode,))
    for x in cur.fetchall() :
            lat = x[2]
            lon = x[3]
            latLon = [lat,lon]
    return latLon

And pass them to the Flask webpage in this HTML

{% if latLon %}
<p class="value"><strong>Value:</strong> {{ latLon }}

This all works fine, the latLon render in the Flask output...but then how do I pass them to this little javascript snippet? Right now I just get 'undefined'.

<script>
var latLon = latLon;
document.getElementById("demo").innerHTML = latLon;
</script>  
{% endif %}

If I instead do

var latLon = 'this is latLon'

Then that string outputs fine - but I want it to dynamically change.

Thanks in advance

Upvotes: 1

Views: 1480

Answers (1)

Celeo
Celeo

Reputation: 5682

In your JavaScript, you're doing var latLon = latLon;. As you say, latLon is undefined.

Take a look at your HTML:

<p class="value"><strong>Value:</strong> {{ latLon }}

Here, latLon is a variable passed to Jijnja. The same needs to be done in the JavaScript:

var latLon = {{ latLon }};

Upvotes: 1

Related Questions