Unable to pass jinja2 variables into javascript snippet

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

Try with quotes:

alert("{{name}}");

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/

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 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 }}');