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?
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:
data-name an arbitrary string, or does it have to be data-name? Or just start with data-? Where has the other variable come from?
Try with quotes:
alert("{{name}}");
name contains line breaks such as '\n'. It will throws a javascript syntax error.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/
var name = JSON.parse('{{ name | tojson }}');.I just figure I would add the solution I ended up using.
It has a few advantages over the other answers:
let data = JSON.parse('{{ data | tojson }}');
JSON.parse('{{ url_for(\'foo.bar\', filename = \'foobar.txt\') | tojson }}');, this gives an Uncaught SyntaxError: Unexpected token { in JSON at position 1
json.dumps, not really sure but I doubt anyone implemented a json encoder for this.
"1\\'1" will break it."1\\'1" is not valid in this case. Unlike var name = {{name|tojson}}, data can be any jsonable data. You are trying to say that you can handle (coerase or validate or reject or escape, whatever) it in before you save the input data, even I was trying to argue about where the data is coming from, but that's actually another thing.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
you can try alert({{name|safe}});
<input type="hidden" name="token_idx" id="token_idx" value='{{token|safe }}'
let token_data = document.getElementById("token_idx").value;
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>
{{ name|safe }}should work