Menu
I know how to pass a variable from Flask (python) to my template html file with {{data}}. However I am having trouble accessing each dictionary element and its respective key-value pairs in the list in javascript.
start.py
def func1():
data = filter() #returns a list of dictionaries
return render_template("template1.html", data=data)
template1.html
<html>
<head>
.....
</head>
<body>
<p>This is html: {{data}}</p>
<script type="text/javascript" src="{{url_for('static', filename='js/add.js') }}"></script>
<script type="text/javascript">
myvar = '{{data}}';
document.write(myvar);
</script>
</body>
</html>
add.js
//code to be written here
myvar and This is html: both outputs out the entire list of dictionaries. I've already tried myvar[0] but that just outputs [ for some reason. I have also done:
myvar = '{{data|tojson}}';
var parsed = JSON.parse(myvar);
document.write(parsed[0]);
but that outputs [object Object].
895
When rendering a string, list, or dictionary in HTML from within a Flask app, you need to pass the variables from Python to the HTML, often using the render_template function within Flask. Skip to content Skip to footer Grant T. Aguinaldo The Sherlock Holmes of Environmental Compliance Main navigation Home About Blog Portfolio Contact
Let you have two lists maintenance_next [] and maintenance_block_time [] of the same length, and you want to pass these two list's data to javascript using the flask. So you take some invisible label tag and set its tag name is a pattern of list's index and set its class name as value at index.
Is it possible to pass a list from Python to JavaScript or should I pass each item from list one by one in a loop? How can I do this? To pass some context data to javascript code, you have to serialize it in a way it will be "understood" by javascript (namely JSON).
So, to achieve exactly what you want (loop over a list of items, and pass them to a javascript function), you'd need to serialize every item in your list separately. Your code would then look like this: import json @app.route ('/') def my_view (): data = [1, "foo"] return render_template ('index.html', data=map (json.dumps, data))
By placing data in single quotes you are creating a string. To get python data types into JavaScript, serialize them with {{ data | tojson }}.
var parsed = JSON.parse('{{data | tojson}}');
You may need to escape the output with safe filter. See more at sending data as JSON object from Python to Javascript with Jinja
172
Got it!
myvar = '{{data|tojson}}';
var parsed = JSON.parse(myvar);
document.write(parsed[0]);
Outputs the [object Object] which is the dictionary at the position. So then all you need to do is document.write(parsed[0].name); to access its name value!
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With