0

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:

  1. I am using Flask.
  2. number_of_cycles is an integer variable also imported from Python. number_of_cycles = 3 in this case.
6
  • what is number_of_cycles and please mention what you have write in // Do something 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 Commented Dec 11, 2018 at 18:05
  • 1
    What HTML templating engine are you using? Commented Dec 11, 2018 at 18:11
  • 1
    See this :stackoverflow.com/questions/23038710/… Commented Dec 11, 2018 at 18:38
  • It should be like this var js_floatnums=JSON.parse("{{ list_of_floatnums }}"); or var js_floatnums= {{ list_of_floatnums |tojson }} Commented Dec 11, 2018 at 18:39

1 Answer 1

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}}");
Sign up to request clarification or add additional context in comments.

9 Comments

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 "".
Sadly no. It works perfectly for float numbers, but the output keeps disappearing whenever I try to parse the strings.
@VicenteN Change it to json.stringify with the string.
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 = "[&#39;January&#39;, &#39;February&#39;, &#39;March&#39;]").
@VicenteN JSON.parse works fine what about pars JSON.dumps
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.