Import Python list of strings into Javascript script (HTML file)

Question

I have an HTML file including an embedded script (Javascript). I need to import some lists from Python as variables and I'm having trouble with one that contains strings. To give an example, I have something like the following:

# In Python
list_of_floatnums = [2.5, 3.5, 4.5]
list_of_strings = ["January", "February", "March"]

Then in the script, I do something like this:

<!-- Embedded JS script -->
<script>
    var i = 0;
    var js_floatnums = JSON.parse('{{ list_of_floatnums }}');
    var js_strings = JSON.parse(['{{ list_of_strings }}']);
    for (i = 0; i < '{{ number_of_cycles }}'; i++) {
        // Do something
    }
</script>

However, I get nothing as output. If I skip the JSON.parse() for the string array:

var js_strings = ['{{ list_of_strings }}'];

Then I get everything else to work, except that array of strings (everything is assigned to the first element). For example:

In ["January", "February", "March"] you got 2.5 points.
In undefined you got 3.5 points.
In undefined you got 4.5 points.

Of course what I would require is:

In January you got 2.5 points.
In February you got 3.5 points.
In March you got 4.5 points.

Any clues on what I don't know and I'm doing wrong? I had always imported single variables with {{ variable }}, and that is straightforward.

EDIT:

I am using Flask.
number_of_cycles is an integer variable also imported from Python. number_of_cycles = 3 in this case.

what is number_of_cycles and please mention what you have write in // Do something — Hemil Patel
– Hemil Patel, Commented Dec 11, 2018 at 18:02
It looks like you have not eterate the value with loop from list_of_strings and you are only iterating it with number_of_cycles — Hemil Patel
– Hemil Patel, Commented Dec 11, 2018 at 18:05
It should be like this var js_floatnums=JSON.parse("{{ list_of_floatnums }}"); or var js_floatnums= {{ list_of_floatnums |tojson }} — I_Al-thamary
– I_Al-thamary, Commented Dec 11, 2018 at 18:39

I_Al-thamary · Accepted Answer · 2018-12-11 20:42:55Z

0

Try this

<script>
    var i = 0;
    var integer_value = parseInt('{{number_of_cycles}}')
    var js_floatnums= JSON.parse("{{ list_of_floatnums }}");
// or you can use var js_floatnums= { list_of_floatnums |tojson }};
    var js_strings =JSON.parse("{{ list_of_strings }}");
// or you can use var list_of_strings ={{ list_of_strings |tojson }}; 
    for (i = 0; i < integer_value ; i++) { 
        // Do something
    }
</script>

Actually, you can use one of these methods

var js_floatnums= { list_of_floatnums |tojson }};
var js_floatnums= { list_of_floatnums |tojson |safe}};
var js_floatnums=JSON.parse("{{ js_floatnums}}");
var js_floatnums=JSON.dumps("{{ js_floatnums}}");

edited Dec 11, 2018 at 20:42

answered Dec 11, 2018 at 18:55

I_Al-thamary

4,1883 gold badges29 silver badges47 bronze badges

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

9 Comments

Vicente N Over a year ago

If I try something like this: var js_floatnums= {{ list_of_floatnums |tojson }}; I get the following warnings: [js] Property assignment expected. [js] Declaration or statement expected. And if I try to run the program, it crashes. It happens whenever I try to assign something without quotation marks "".

Vicente N Over a year ago

Sadly no. It works perfectly for float numbers, but the output keeps disappearing whenever I try to parse the strings.

I_Al-thamary Over a year ago

@VicenteN Change it to json.stringify with the string.

Vicente N Over a year ago

json.stringify makes the rest of the output remain, but it doesn't give the string array as expected (i.e. it creates a string, not an array of strings). For example, js_strings[0] is equal to " instead of January, js_strings[1] is equal to [ instead of February, and so on. (js_strings = "['January', 'February', 'March']").

I_Al-thamary Over a year ago

@VicenteN JSON.parse works fine what about pars JSON.dumps

|

Collectives™ on Stack Overflow

Import Python list of strings into Javascript script (HTML file)

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related