How to Pass Data from Flask to JavaScript in a Template and Use it with Google Maps?

Passing Data from Flask to JavaScript in a Template

Issue: You want to utilize a dictionary retrieved from an API call in your JavaScript code within a Flask template, particularly to pass long/lat tuples to the Google Maps API.

Solution:

To pass variables from Flask to JavaScript in a template, you can use the {{ variable }} syntax anywhere within it. For instance, in your get_data.html template:

  <script>
    var someJavaScriptVar = '{{ geocode[1] }}';
  </script>


  <p>Hello World</p>
  <button onclick="alert('Geocode: {{ geocode[0] }} ' + someJavaScriptVar)">Click me</button>

This generates the HTML output that contains the JavaScript variable assignment.

To pass a list to JavaScript, you'll need to create an array definition in your output:

  
    <script>
      var myGeocode = ['{{ geocode[0] }}', '{{ geocode[1] }}'];
    </script>
  
  
    <p>Hello World</p>
    <button onclick="alert('Geocode: ' + myGeocode[0] + ' ' + myGeocode[1])">Click me</button>
  

Jinja2 also supports advanced Python constructs. For example, the above can be shortened to:

  <script>
    var myGeocode = [{{ ', '.join(geocode) }}];
  </script>


  <p>Hello World</p>
  <button onclick=""alert('Geocode:" mygeocode></button>

You can also leverage Jinja2 filters. If your dictionary is in JSON format, you can use the tojson filter to convert it to a JavaScript object:

<script>
  var myGeocode = {{ geocode|tojson }};
</script>

The above is the detailed content of How to Pass Data from Flask to JavaScript in a Template and Use it with Google Maps?. For more information, please follow other related articles on the PHP Chinese website!