Home > Article > Backend Development > How to Pass Data from Flask to JavaScript in a Template?
Passing Data from Flask to JavaScript in a Template
In Flask, the render_template() function passes variables to views for use in HTML. However, how can you pass data to JavaScript within the same template?
Consider the following example, where a Flask app calls an API that returns a dictionary. The goal is to pass longitude and latitude information to JavaScript for use with the Google Maps API.
<code class="python">from flask import Flask, render_template app = Flask(__name__) @app.route('/') def get_data(): events = api.call(get_event, arg0, arg1) geocode = event['latitude'], event['longitude'] return render_template('get_data.html', geocode=geocode)</code>
Solution
Flask allows you to use the {{ variable }} placeholder syntax anywhere in the template, including in JavaScript code.
To pass the geocode data to JavaScript, simply include it within the {{ }} placeholder:
<code class="html"><script> var someJavaScriptVar = '{{ geocode[1] }}'; </script></code>
This will insert the value of geocode[1] (the longitude) into the JavaScript variable someJavaScriptVar.
To pass the data as an array, you can use the join() function:
<code class="html"><script> var myGeocode = [{{ ', '.join(geocode) }}]; </script></code>
This will generate the following JavaScript:
<code class="javascript">var myGeocode = ['value_of_geocode[0]', 'value_of_geocode[1]'];</code>
You can also use advanced constructs such as for loops and if statements within the {{ }} placeholder. See the Jinja2 documentation for more details.
Additionally, you can use the tojson filter to convert Python objects to JSON strings, which can be directly used in JavaScript:
<code class="html"><script> var myGeocode = {{ geocode|tojson }}; </script></code>
This approach provides a convenient way to pass complex data structures from Flask to JavaScript in your templates.
The above is the detailed content of How to Pass Data from Flask to JavaScript in a Template?. For more information, please follow other related articles on the PHP Chinese website!