Flask variable showing up in HTML but not JavaScript

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:

enter image description here

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

19 thoughts on “Flask variable showing up in HTML but not JavaScript”

Leave a Comment