Accessing python list in javascript as an array

Question

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?

Answer 1

1. 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.

2. 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.

3. 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.

4. 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.

Answer 2

You can also use

{{ test|safe }} 

or

{{ test|tojson|safe }}

The safe filter is to be used within script tags.