Flask: How to pass variables from python to javascript (inline script / external script file)

flask
この記事は約9分で読めます。

How to pass variables from python to javascript (inline script / external script file) This is an article related to flask or jinja2, but how to handle objects created on the server side with python (list data this time) on the js side I will explain about.

It is necessary to pass the data from the python side to the js side by all means in the implementation of the application that calculates and displays the Meeting cost made with the flask that is being made for play at any time (it is a common js beginner’s task) So, here’s an explanation of how to do it.

スポンサーリンク

OVERVIEW IMAGE

As an image, the processing is as follows.

Even if you pass arguments with app.route in python, js can not handle it unless you mess with it a little, so you need to redefine it inside the script tag of jinja (template / html file) once. There is a way to handle it directly, but I will not introduce it this time, so if you need it, please create it while looking at the document.

Actual file structure / code overview

File structure

The file structure is as follows. Only View / Template without Models.

-workspace
  |--static
         |---js
               |--sample.js
         |--stylesheet
               |--stylesheet.css
 |--templates
         |--base.html
         |--test_page.html
|--app.py

Code Overview

Explaining following 3 scripts: app.py/ test_page.html/ sample.js

~app.py~

rom flask import Flask
from flask import render_template, url_for
from flask import request

app = Flask(__name__)

input_from_python = ["a","b","c"]  # transfer data

@app.route('/')
def index_render():
    return render_template("index.html")

@app.route('/testpage')
def test_page_view():
    return render_template("test_page.html", input_from_python= input_from_python)  #here!! transfer

if __name__ == '__main__':
    app.run(debug=True)

In app.py, when / testpage is called, it is rendered and an object called input_from_python is passed.

~test_page.html~

{% block head %}
    <script src={{ url_for("static", filename="js/sample.js") }}></script>
{% endblock %}


{% block content %}
    
    <script type="text/javascript">
        let list_data = {{ input_from_python | tojson }};  #Redefined here as a js variable

        function add_reversed_data(){
            var list2 = list_data.reverse();
            document.getElementById("output_from_html").innerHTML = "new data is" + list2;

        }

        function add_original_data(){
            document.getElementById("output_from_html2").innerHTML = "original data is" + list_data;
        }

    </script>

    <p id="input_from_python">{{ input_from_python | tojson }}</p>
    <p id="output_from_html">from_html_file</p>
    <p id="output_from_html2">from_html_original</p>
    <p id="output_from_js">from_js_file</p>
    <p id="output_from_js2">from_js_original</p>
    <button type="button"  value="data_update" onclick="add_reversed_data()">test_from_html</button>
    <button type="button" valu="data_add2" onclick="add_original_data()">test_from_html2</button>
    <button type="button"  value="data_update_from_js" onclick="add_reversed_data_from_js()">test_from_js</button>
    <button type="button" value="data_add" onclick="add_data_from_js()">test_from_js_original</button>

{% endblock %}

【Vital point】

in <script></script>, as “let list_data = {{ input_from_python | tojson }}”、redefining the object received from python in the list_data variable. By doing this, it becomes a variable that can be handled on the js side.

After that, about 4 buttons are installed, and the onclick attribute of each button calls the script of each js function (both inline script and sample.js).

~sample.js~

function add_reversed_data_from_js() {
    let list_data2= list_data.push("test_input_from_js");

    document.getElementById("output_from_js").innerHTML = "from_js:" + list_data2;
}

function add_data_from_js(){
    document.getElementById("output_from_js2").innerHTML = "from_js_original:" +list_data;

}

Execution result

Pasting the execution result with a screenshot.

Before button clicked:

After button clicked:

You can see that the execution result of js processed by js (inline script / external script) is returned to each p tag part. I was able to safely display the execution result in html through the js processing.

SUMMARY

I don’t think it’s particularly difficult, but I introduced how to pass variables to js via jinja.

I am making a meeting cost calculation tool using flask at another request, and the implementation is scheduled to be completed soon, so I would like to expose the simplified one as soon as it is completed. (Honestly, js is a tool that I think is easier.)

コメント

タイトルとURLをコピーしました