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?
Answers:
Try with quotes:
alert("{{name}}");
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
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
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/
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 }}');
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;
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?
Try with quotes:
alert("{{name}}");
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
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
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/
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 }}');
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;