Is it possible to pass variables from Jinja2 to function in Javascript without writing <script> in HTML?

Question

I'm using Flask for the course project. I have some javascript, and HTML files in static and templates folder, the hierarchy looks like this:

/flask_project
-->/run.py
-->/templates
  -->/index.html
-->/js
  -->/chart.js

There is a function in chart.js that can draw plots, and I need to pass some data from my python code to this function.

@app.route('/index')
    def index():
        data=[1,2,3,4,5,6]
        return render_template('index.html',data=data)

and in my index.html, I have

<script src="{{url_for('static',filename='chart.js')}}"></script>

and in my chart.js I have a function

draw(data){...}

I want to pass my data to this function, but if I add var data={{data}} in .js file, it will give me an error.

I know it would work if I copy codes from .js to <scripts></scripts> in index.html file, but it's very long and will make the HTML file looks ugly.

So is there any way that I can pass variables directly from jinja2 to javascript? Like calling the function draw({{data}}) in index.html?

Jürgen Gmach · Accepted Answer · 2020-10-18 19:24:31Z

1

I see two ways:

a) render the data via Jinja into data attributes and read it via Javascript, see https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

b) call your backend via Javascript and retrieve the data; in early times this was done with jQuery.ajax(); nowadays you would probably use fetch API from pure Javascript

answered Oct 18, 2020 at 19:24

Jürgen Gmach

6,3664 gold badges29 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

CyberHank · Accepted Answer · 2020-10-19 00:22:29Z

0

According to Flask's documentation, try adding |tojson to your Jinja code.

chart.js

var data = {{data|tojson}}
draw(data){...}

I haven't tried running your code, but try messing with sending data from your endpoint as JSON if it doesn't work using this method right away.

edited Oct 19, 2020 at 0:22

answered Oct 19, 2020 at 0:12

CyberHank

434 bronze badges

Collectives™ on Stack Overflow

Is it possible to pass variables from Jinja2 to function in Javascript without writing <script> in HTML?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related