flask python list to javascript

Question

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

dizzyf · Accepted Answer · 2017-05-27 20:35:44Z

7

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

answered May 27, 2017 at 20:35

dizzyf

3,7233 gold badges22 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Max Powers Over a year ago

Thanks, unfortunately that did not work. I just got two less characters returned as it seems it was counting the quote marks as well. My return output was changed from 23 to 21 :return outout>>>>> 21["abc", "def", "hij"]

Ilja Everilä Over a year ago

If it's a JSON string, parse it with JSON.parse() (in Javascript).

Miebaka · Accepted Answer · 2021-11-15 21:35:25Z

1

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

answered Nov 15, 2021 at 21:35

Miebaka

2932 silver badges5 bronze badges

Comments

Prashant Pokhriyal · Accepted Answer · 2021-06-22 18:12:24Z

0

Thanks,it works for me.

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

answered Jun 22, 2021 at 18:12

Prashant Pokhriyal

11 bronze badge

Collectives™ on Stack Overflow

flask python list to javascript

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related