Injecting data into javascript with Python Flask

Question

I am following the instructions from http://www.highcharts.com/docs/getting-started/your-first-chart to create a sample chart. I have saved the main chunk of javascript locally, and am add the <script src="/chart.js"></script> tag in my html to reference it.

On my side, I am using python flask to render a html template containing the script.

@app.route('/view', methods=['POST', 'GET'])
def show_graph_view():
    query= request.form['query']
    data = get_current_data(query)
    return render_template('graph.html', data=data)

I have a function to prepare some custom and current data I want to plot instead and I want the data to be available once the client brower loads. How do I add this data into the charts?

@Seekheart added a code, my problem is with passing the data parameters to a js file outside the html — hangc
– hangc, Commented Aug 2, 2016 at 2:04
so your flask app is your server, to access the data you need to perform a GET from your client side js. — Seekheart
– Seekheart, Commented Aug 2, 2016 at 2:07
@Seekheart is there no way I can get the data without a GET request? I think this can be done if I put the javascript in the html, but it gets ugly — hangc
– hangc, Commented Aug 2, 2016 at 2:11

Robert Moskal · Accepted Answer · 2016-08-04 00:54:54Z

1

Assuming a globally accessible function, just call it in the module with the data converted to json on the server with the tojson and safe filters.

<script type=text/javascript> doSomethingWith({{ data|tojson|safe }}); </script>

It's a bit hard to follow the logic when you mix together server side templating and client side scripting like this. But sometimes you gotta do it.

edited Aug 4, 2016 at 0:54

answered Aug 2, 2016 at 2:13

Robert Moskal

22.7k8 gold badges69 silver badges91 bronze badges

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

Comments

joram · Accepted Answer · 2021-07-20 12:15:57Z

0

Is stumbled on this old answer in 2021 and I just wanted to add another option..

Injecting Python seems to mess with your Javascript, but you can actually do this:

<script>
    var names = []
    var i = 0
    // {% for i in range(0, names_len) %}      
        names[i++] = "{{names[i]}}";
    // {% endfor %}  
</script>

You can "comment-out" the injected Pyhton code, so your Javascript remains correct :)

answered Jul 20, 2021 at 12:15

joram

1537 bronze badges

Collectives™ on Stack Overflow

Injecting data into javascript with Python Flask

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