Unable to pass jinja2 variables into javascript snippet

Question

How do i pass jinja2 data into javascript. I have a Flask REST url as /logs/<test_case_name> I am trying use .getJSON() to query the above URL and hence would want to pass the jinja2 data which has the testcasename to .getJSON function.

sample code:

<script type="text/javascript">
  alert({{name}});
</script>

It doesn't work. Any suggestions please?

Answer 1

other than encapsulating the variable in a string, an alternate is jquery for profit:

its generally a bad idea to mix template language with javascript. An alternative would be to use html as a proxy - store the name in an element like so

<meta id="my-data" data-name="{{name}}" data-other="{{other}}">

then in the javascript do

var djangoData = $('#my-data').data();

this has advantage in:

• javascript no longer tied to the .html page
• jquery coerces data implicitly

Answer 2

Try with quotes:

alert("{{name}}");

Answer 3

I know this is a kinda old topic, but since it attracts a lot of views I suppose some people are still looking for an answer.

Here's the simplest way to do it:

var name = {{name|tojson}};

It will 'parse' whatever 'name' is and display it correctly: https://sopython.com/canon/93/render-string-in-jinja-to-javascript-variable/

Answer 4

I just figure I would add the solution I ended up using.

It has a few advantages over the other answers:

• It is 100% valid javascript at the template level (no editor/lint errors).
• Does not need any special HTML tag.
• No dependencies (jquery, or otherwise).

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

Answer 5

This is how I did it

My html Element

<!--Proxy Tag for playlist data-->
<meta id="my_playlist_data" data-playlist="{{ playlist }}">

My script element

// use Jquery to get data from proxy Html element
var playlist_data = $('#my_playlist_data').data("playlist");

See .data() documenttation for more

Answer 6

you can try alert({{name|safe}});

Answer 7

<input type="hidden" name="token_idx" id="token_idx" value='{{token|safe }}'

let token_data = document.getElementById("token_idx").value;

Answer 8

Adding my working solution from HTML as I spent a full day hunting for it in case it helps someone.

This html is passed back its prefill data and I could not get access to the variables I needed from that dict in the Jinja2 for loop

render_template('home.html', prefill_data=request.form)

The real key here was this trick to get a variable in as key in string format prefill_data["player{}name".format(n)]

And these curly braces to access value as string "{{ prefill_data["player{}name".format(n)]}}"

{% if nplayer_form is not defined %}
    {% set nplayer_form = 4 %}
{% endif %}   

{% if session['additional_players'] %}
    {% set nplayer_form = nplayer_form + session['additional_players'] %}
{% endif %}


{% for i in range(nplayer_form) %}
    {% set n = i+1 %}

<tr id="Row{{ n }}">
<td>
<label for="player{{ n }}name_input" name="player{{ n }}name_input_label"></label>
<input type="text" name="player{{n}}name" id = "player{{n}}name_input" {% if prefill_data %} value="{{ prefill_data["player{}name".format(n)]}}"{% endif %}/>
</td>

<td>
<label for="player{{n}}strength_id" name="player{{n}}strength"></label>
<select name="player{{n}}strength" id="player{{n}}strength_id"> 
    <option value="1" {% if prefill_data %}{% if ((prefill_data["player{}strength".format(n)]) == "1") %} selected {% endif %}{% endif %}>Beginner</option>
    <option value="2" {% if prefill_data %}{% if ((prefill_data["player{}strength".format(n)]) == "2") %} selected {% endif %}{% endif %}>Intermediate</option>
    <option value="3" {% if prefill_data %}{% if ((prefill_data["player{}strength".format(n)]) == "3") %} selected {% endif %}{% endif %}>Advanced</option>                 
</select>
</td>

<td>
<label for="p{{n}}checkbox_id" name="p{{n}}checkbox_label">
<input type="checkbox" id="p{{n}}checkbox_id" name="p{{n}}checkbox" {% if prefill_data %} {% if (prefill_data["p{}checkbox".format(n)] =="on") %} checked {% endif %} {% endif %} />
</label>
</td>

</tr>