How To Pass Jade Template Array To Javascript Variable

Pass Variables From Flask/Python Server To Javascript Files

Almost any application requires data from server in its javascript files. Because managing application states with javascript got easier and practical by javascript customs grows.

Flask is a neat framework if yous want to make web applications in Python. I will show you lot an instance by using a Flask framework but this is an arroyo and y'all can apply this approach to whatsoever server side linguistic communication.

First i created an html login folio. This html document uses Jinja2 templating engine which is provided by Flask automatically.

start.html

          ...
<div course="loginViaSmsSection">
            <h5 form="loginViaSmsTitle">
            <svg>
            <championship>SMS</title>
            <use xlink:href="{{ url_for('static', filename='graphics/sprite.svg#sms') | supersede('%23', '#') }}" />
            </svg>
            Login via SMS
            </h5>
            <div course="label">Phone Number</div>
            <input blazon="text" proper name="phone_num" form="loginInput" id="phone_num" />
            <a href="#" id="loginViaSms" grade="loginViaSms">
            Ship Verification Lawmaking
            </a>
            <a href="#" id="switchToEmailLogin" class="switchToEmailLogin">or click here if you desire to log in via email.</a>
            </div>
...
<script type="text/javascript" src="{{ url_for('static', filename='app.js') }}"></script>
...

start.html will be a elementary html document when its rendered. I didn't include any javascript to this document. All javascript code will be in app.js file.

There are some sensitive variables that we must keep in server similar csrf token, application secrets and even data got from database. Our javascript file should access these variables whenever it wants.

Y'all can recollect to inject all javascript lawmaking within html document let Flask bargain with it. This is very bad for search engines and makes it impossible to piece of work with modular javascript.

Nosotros place just one javascript object inside our html document to laissez passer variables that came from server, to javascript files.

start.html that saves variables in a javascript object:

          ...
<div class="loginViaSmsSection">
            <h5 class="loginViaSmsTitle">
            <svg>
            <title>SMS</title>
            <use xlink:href="{{ url_for('static', filename='graphics/sprite.svg#sms') | replace('%23', '#') }}" />
            </svg>
            Login via SMS
            </h5>
            <div class="label">Phone Number</div>
            <input blazon="text" name="phone_num" class="loginInput" id="phone_num" />
            <a href="#" id="loginViaSms" class="loginViaSms">
            Send Verification Code
            </a>
            <a href="#" id="switchToEmailLogin" class="switchToEmailLogin">or click here if y'all want to log in via electronic mail.</a>
            </div>
...
            <script type="text/javascript">
window.appConfig = {
              debug: {% if env == 'evolution' %}true{% else %}faux{% endif %},
              facebook_app_id: {{ facebook_app_id }},
              accountkit_api_version: '{{ accountkit_api_version }}',
              csrf_token: '{{ csrf_token }}'
}
</script>            
<script type="text/javascript" src="{{ url_for('static', filename='app.js') }}"></script>
...

Now we can access all variables defined in window.appConfig object, from our javascript file.

app.js

          ...
window.fbAsyncInit = function() {
            FB.init({
            appId      :            appConfig.facebook_app_id,
            xfbml      : truthful,
            version    : 'v2.8'
            });
            FB.AppEvents.logPageView();
};
(office(d, southward, id){
            var js, fjs = d.getElementsByTagName(due south)[0];
            if (d.getElementById(id)) {render;}
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/en_US/sdk.js";
            fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));          var AccountKit_OnInteractive = role(){
            AccountKit.init({
            appId:            appConfig.facebook_app_id,
            debug:            appConfig.debug,
            country:            appConfig.csrf_token,
            version:            appConfig.accountkit_api_version            
            })
}
...