I have this in my flask views.py
def showpage():
...
test = [1,2,3,4,5,6]
return render_template("sample.html",test=test)
I have this in my sample .html
<script> var counts = {{test}}; </script>
This gives me a empty counts variable. How can I get the counts same as the test list in python?
When you insert variable to template {{ test }} it take object representation. For list of int [1,2,3,4,5,6] it will be rendered as [1, 2, 3, 4, 5, 6], so it is valid javascript array, but this method not safe complex objects without javascript-like representation, for example, test = [1,2,3,4,5,any] will rendered as [1, 2, 3, 4, 5, <built-in function any>], however this is just example and will never work.
To implicitly cast to javascript object in flask exist tojson filter:
<script> var counts = {{ test|tojson }}; </script>
So if the object is JSON serializable, then all will be rendered, otherwise the template engine will raise an exception.
You also can send javascript code to your template:
from flask import json
return render_template("sample.html",test=json.dumps(test))
but it is not a good approach and it's better use tojson filter that is also HTML markup safe.
I prefer to not mix any javascript code within templates and split templates, javascript and javascript data with ajax. If this approach is hard I would prefer to use tojson filter.
tojson filter produces a HTML safe version of the value, json.dumps() does not. Always use |tojson in the template, not json.dumps(), when producing JavaScript values.You can also use
{{ test|safe }}
or
{{ test|tojson|safe }}
The safe filter is to be used within script tags.
You use json.dumps in the flask view and JSON.parse in the javascript code.
In the python view:
def showpage():
...
test = [1,2,3,4,5,6]
test = json.dumps(test)
return render_template("sample.html",test=test)
In the JavaScript code:
<script> var counts = JSON.parse("{{ test }}"); </script>
<script> var counts = JSON.parse("{{ test }}"); </script> and it not sense because <script> var counts = {{ test }}; </script> will have same result and more short for this example. No reason make json twice.
JSON.parse() at all; use tojson for a HTML safe Javascript subset instead.I've never liked having to use json.dumps. In this solution, arrays are not a special case. Just put your arrays and any other variable into an object:
Python
@app.route('/somePath')
def example():
data = {
'robotNames': ['Wall-E', 'Bender', 'Rosie']
}
return render_template('index.html', data=data)
JavaScript
<script>
var flaskData = JSON.parse('{{data | tojson | safe}}');
var robots = flaskData.robotNames;
robots.forEach(function (robot) {
console.log(robot);
});
</script>
You try to return dictionary from your python showpage function like following and it will work:
def showpage():
"""Your logic for getting the list to return """
test_dict = {"data_list": [1,2,3,4,5]}
return render_template("sample.html", test=test_dict)
<script> var counts = ; </script>or something else?