How to pass a list from Python, by Jinja2 to JavaScript

by

To pass some context data to javascript code, you have to serialize it in a way it will be “understood” by javascript (namely JSON). You also need to mark it as safe using the safe Jinja filter, to prevent your data from being htmlescaped.

You can achieve this by doing something like that:

The view

import json

@app.route("https://stackoverflow.com/")
def my_view():
    data = [1, 'foo']
    return render_template('index.html', data=json.dumps(data))

The template

<script type="text/javascript">
    function test_func(data) {
        console.log(data);
    }
    test_func({{ data|safe }})
</script>

Edit – exact answer

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:

The view

import json

@app.route("https://stackoverflow.com/")
def my_view():
    data = [1, "foo"]
    return render_template('index.html', data=map(json.dumps, data))

The template

{% for item in data %}
    <span onclick=someFunction({{ item|safe }});>{{ item }}</span>
{% endfor %}

Edit 2

In my example, I use Flask, I don’t know what framework you’re using, but you got the idea, you just have to make it fit the framework you use.

Edit 3 (Security warning)

NEVER EVER DO THIS WITH USER-SUPPLIED DATA, ONLY DO THIS WITH TRUSTED DATA!

Otherwise, you would expose your application to XSS vulnerabilities!

More Related Contents:

  1. How can I pass data from Flask to JavaScript in a template?
  2. Rendering to JS with Jinja produces invalid number rather than string
  3. Pass JavaScript variable to Flask url_for
  4. Update and render a value from Flask periodically
  5. Unable to pass jinja2 variables into javascript snippet
  6. Flask Dynamic data update without reload page
  7. sending data as JSON object from Python to Javascript with Jinja [duplicate]
  8. Static variables in JavaScript
  9. Convert string to variable name in JavaScript
  10. Javascript Regex: How to put a variable inside a regular expression? [duplicate]
  11. How to check a not-defined variable in JavaScript
  12. JavaScript variable definition: Commas vs. Semicolons
  13. “Variable” variables in JavaScript
  14. Headless Browser for Python (Javascript support REQUIRED!) [closed]
  15. Pass vars to JavaScript via the SRC attribute
  16. How do I call a Javascript function from Python?
  17. Is there a better way of writing v = (v == 0 ? 1 : 0); [closed]
  18. Redeclaring a javascript variable
  19. javascript variable scope in the IF statement
  20. When/why to prefix variables with “$” when using jQuery? [duplicate]
  21. How to render Streamable image on React coming from FastAPI server?
  22. Is there an __repr__ equivalent for javascript?
  23. Django authentication and Ajax – URLs that require login
  24. How to access a JavaScript variable from code behind in asp.net
  25. JSON to string variable dump
  26. What’s different between Python and Javascript regular expressions?
  27. How to set up Python server side with javascript client side
  28. Print / display a JavaScript variable’s name instead of it’s value
  29. FastAPI is not returning cookies to React frontend
  30. Get data from html and and pass the data back to the front end using ajax or js

Leave a Comment