I am using python flask temple to build a site. I have a case where I want to send a python list to a java script. The python list contains three objects however when I do list1.length in the java script environment I see the length of this list is 23. This is most likely because java script is identifying it as a string. My question is how to make the python list stay a list once it's passed into javascript ?

# my route with python list1
@app.route('/chart_sandbox')
def chart_sandbox():

    list1 = ['abc', 'def', 'hij']

    return render_template("chart_sandbox.html", list1=json.dumps(list1))




# My Java script
<script type="text/javascript">

    var list1 = '{{list1|tojson}}'
    var listLength = list1.length


    document.write(listLength)
    document.write(list1)

</script>

# this is what is returned to me. As you can see java script length is seen 
#as 23 instead of 3
23"["abc", "def", "hij"]"

I am using python flask temple to build a site. I have a case where I want to send a python list to a java script. The python list contains three objects however when I do list1.length in the java script environment I see the length of this list is 23. This is most likely because java script is identifying it as a string. My question is how to make the python list stay a list once it's passed into javascript ?

# my route with python list1
@app.route('/chart_sandbox')
def chart_sandbox():

    list1 = ['abc', 'def', 'hij']

    return render_template("chart_sandbox.html", list1=json.dumps(list1))




# My Java script
<script type="text/javascript">

    var list1 = '{{list1|tojson}}'
    var listLength = list1.length


    document.write(listLength)
    document.write(list1)

</script>

# this is what is returned to me. As you can see java script length is seen 
#as 23 instead of 3
23"["abc", "def", "hij"]"

• javascript
• python
• flask

3 Answers 3

Remove the quotes around the jinja text. That's converting your list into a string-representation of a list. Something like this should work:

var list1 = {{ list1 | tojson }};

This worked me, I wrapped the list with the or operation and tojson in double curly brackets as an argument in the JSON.parse function, to make it a JavaScript object.

let list1 = JSON.parse('{{ list1 | tojson }}');

If you have no plans to modify the data in JavaScript use this instead