Flask variable showing up in HTML but not JavaScript

Question

In my init.py file, I have paired the matching latitude and longitude numbers into a tuple and pushed them into a list named, "latsLngs". I am passing this info to my Jinja template, and would like to get the paired latitude and longitude to show up within the JS that is included in the HTML document.

Here is the Jinja Template code for how I am trying to accomplish this:

<div id='map'></div>
    {% for coor in latsLngs%}
        <h1>{{coor}}</h1>
    {% endfor %}
    <script>
        {% for coor in latsLngs%}
            console.log({{coor}})
        {% endfor %}
        mapboxgl.accessToken = 'pk.eyJ1IjoiYXphcmlhZGVkbW9uIiwiYSI6ImNrMmxmdjgwZjA2b3kzcHQ1dWh5Znc1NDcifQ.2VHaTw15QaiOknOoW8aP4A';
        var map = new mapboxgl.Map({
          container: 'map',
          style: 'mapbox://styles/mapbox/light-v10',
          center: [-96, 37.8],
          zoom: 3
        });

However, in the JS code, only the latitude is showing up. As you can see from the above code, I wrote the same code in the HTML and the pair shows up. Here is a photo of what I am talking about:

Obviously the JS is showing up in the console and the HTML is on the webpage. What could be the reason for this issue?

score 2 · Accepted Answer · answered Feb 17 '21 at 18:26

Your code is creating console.log() statements that look like this:

console.log((33.whatever, -111.whatever));

The double-parentheses mean that the inner parens are interpreted as part of the argument expression (the argument to console.log()), so that comma is a comma operator. The only value that matters in such an expression is the last one.

You could try changing your python code to

console.log{{coor}}

because your values already have parentheses. It'd probably be better if your coordinate pairs looked like arrays or something.

Flask variable showing up in HTML but not JavaScript

1 Answers1