CODEWITHSUNDEEP
javascriptpythonflask
Max Powers
Max Powers

Reputation: 1179

flask python list to javascript

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"]"

Upvotes: 3

Views: 7116

Answers (3)

Miebaka
Miebaka

Reputation: 295

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 👇🏽

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

Upvotes: 1

Prashant Pokhriyal
Prashant Pokhriyal

Reputation: 1

Thanks,it works for me.

<script>
  var divlist = {{ pylist | tojson }};
  for(i=0; i < divlist.length; i++){
       divId = divlist[i];
       console.log(divId);
   }
</script>

Upvotes: 0

dizzyf
dizzyf

Reputation: 3593

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 }};

Upvotes: 7

Related Questions