Passing variables from Flask to JavaScript

Question

I looked at similar forums but was not able to get any of the solutions to work. I am trying to pass variables from Flask to my JavaScript file. These values then will be used for PubNub from my JavaScript file.

Here is part of my Python code:

@app.route("/mysettings/")
def user_settings(): 
        return render_template('Settings.html',  project_name = session['project_name'] , publish_key = session['publish_key'] , subscribe_key = session['subscribe_key'] )

Here is part of my JavaScript code (app.js):

var settings = {
        channel: {{project_name}},
        publish_key: {{publish_key}},
        subscribe_key: {{subscribe_key}}
    };

this code works if I use it in my Settings.html file but not in the app.js file.

score 50 · Accepted Answer · edited Aug 03 '21 at 21:32

50

The mobiusklein answers is pretty good, but there is "hack" you should consider. Define your Javascript method to receive params and send data as params to your function.

main.py

@app.route('/')
def hello():
    data = {'username': 'Pang', 'site': 'stackoverflow.com'}
    return render_template('settings.html', data=data)

app.js

function myFunc(vars) {
    return vars
}

settings.html

<html>
    <head>
         <script type="text/javascript" {{ url_for('static', filename='app.js')}}></script>
         <script type="text/javascript">
            myVar = myFunc({{data|tojson}})
         </script>
    </head>
</html>

edited Aug 03 '21 at 21:32

Community

1
1

answered May 16 '16 at 18:11

Mauro Baraldi

6,346
2
32
43

4

This seems normal to me, not a hack. – Alex Hall May 16 '16 at 18:41
3

vars/tojson: this saved my life as non-web developer :D Thanks – Oxydron Jun 14 '17 at 18:38
I need different answer, how can I pass {{translations.somevar }} dict to js file ? – Beqa Bukhradze Jun 11 '18 at 12:26
@BeqaBukhradze same way `{{translations.somevar|tojson}}` – Mauro Baraldi Jun 11 '18 at 12:38
1

@MauroBaraldi nope, I have @ context_processor for translations dictionary and need to link some js separate file and in that file need to use {{translations.somevar|tojson}} and is that possible ? – Beqa Bukhradze Jun 11 '18 at 12:40
Well, so you need to process this JS file aside, then use it. – Mauro Baraldi Jun 11 '18 at 12:45
@MauroBaraldi Yes and does jinja will guess my dict variables with `{{translations.somevar|tojson}}` ? – Beqa Bukhradze Jun 11 '18 at 12:57
https://stackoverflow.com/questions/32878656/flaskjinjia2javascript-passing-flask-template-variable-into-javascript – Beqa Bukhradze Jun 11 '18 at 13:00
@BeqaBukhradze the point is, it will work if your JS code were embedded in HTML code. If it is in another file no. – Mauro Baraldi Jun 11 '18 at 13:00
@MauroBaraldi Yes I need to use it in separate file – Beqa Bukhradze Jun 11 '18 at 13:11
@BeqaBukhradze I answered that [question](https://stackoverflow.com/questions/32878656/flaskjinjia2javascript-passing-flask-template-variable-into-javascript/50798659#50798659) – Mauro Baraldi Jun 11 '18 at 13:20
19

Think you meant `{{data|tojson}}`. – Bob Stein Sep 04 '19 at 10:19
2

FYI - Docs for tojson and other filters: https://jinja.palletsprojects.com/en/2.11.x/templates/#builtin-filters – s2t2 Dec 19 '20 at 23:54
This works initially; but how can one repeatedly call JavaScript with updated context? My JS function is only called on the first GET request/render of the template. Then I want to update the context, and call that JS function in a loop, accepting updated context, without waiting for requests – twotoomanytomato Dec 01 '22 at 15:19
@twotoomanytomato it should work, because it is not a Flask issue, but a JS issue. You could call the request as you want (or your server can handle), from the backend side. – Mauro Baraldi Dec 01 '22 at 16:02

shrishinde · Answer 2 · 2017-07-31T07:06:41.643

37

Simple way to pass variables from flask view to template to javascript file with simple example mentioned by @mauro.

main.py

@app.route('/')
def hello():
    data = {'username': 'Pang', 'site': 'stackoverflow.com'}
    return render_template('settings.html', data=data)

settings.html

<html>
    <head>
         <script type="text/javascript">
            var username = {{ data.username }}
            var site = {{ data.site }}
        </script>
        <script type="text/javascript" src="app.js"></script>
    </head>
</html>

app.js

function myFunc() {
    return username + site
}

edited Jul 31 '17 at 07:06

answered Jul 28 '17 at 12:21

shrishinde

3,219
1
20
31

7

This answer worked for me only after I changed `data.username ` to `data.username|tojson` (I'm passing variable whose name contains slashes, e.g. "/example/name" if that matters.) – Sam Oct 25 '17 at 19:54
Follow @joash answer below for the variables should be assigned the flask variable – R.S.K Aug 02 '21 at 10:58

joash · Answer 3 · 2020-03-05T16:52:52.637

11

<script type="text/javascript">
   var username ='{{ data.username }}'
   var site ='{{ data.site}}'
<script>

edited Mar 05 '20 at 16:52

answered Mar 05 '20 at 15:24

joash

2,205
2
26
31

2

This works well, but on vscode javascript checker will get angry about jinja's curly brackets. To suppress the warnings I added this to my settings.json:`"html.validate.scripts": false,` This suppresses javascript syntax checking on html files. – yomajo Jul 25 '22 at 16:45

score 6 · Answer 4 · answered May 16 '16 at 17:43

The reason is that jinja2 needs to be used to perform the substitution, which from your code doesn't appear to be happening.

Chances are you're serving app.js as a static file, which means that it is never looked at by the templating engine machinery, just served as is.

You can accomplish what you're describing by serving app.js from a URL which is tied to an action which passes the contents of app.js through Flask's render_template function, performing jinja2 substitutions, and all the other customization information, but that means jinja2 has to parse the whole file, which can be expensive.

You might try to pass those variables along using an AJAX request responded to by an action that sends back that same data in JSON. This is a much more common practice, and has the added value of making that data visible to other resources.

score 0 · Answer 5 · answered Jul 17 '22 at 19:07

In this instance, you don't actually need to send your data with render_template() because your data is already stored in your session. Your session data is already available to a jinja2 template. (You might not be able to import it from app.js. You might need to include all the code explicitly in 'Settings.html'.)

main.py

@app.route("/mysettings/")
def user_settings(): 
    return render_template('Settings.html')

settings.html

<script type="text/javascript">
var settings = {
    channel: {{ session.project_name }},
    publish_key: {{ session.publish_key }},
    subscribe_key: {{ session.subscribe_key }}
};
</script>

Passing variables from Flask to JavaScript

5 Answers5

Linked