how to get a python variable in JS Django

Question

I'm using Django and sending a variable from views.py to my template. How can I get that variable in my JS file?

return render(request, 'dashboard/dashboard.html', {"value":123})

Now I want to get the value variable in my JS file. How can I do it? Inside the template,ie HTML file its easy, just do {{value}} and you get it printed, But I wanted to play with this variable a bit and get it into my JS file. Ho do I do it?

Include the variable in a div value_value & then just do a get_by_id?! — shad0w_wa1k3r
– shad0w_wa1k3r, Commented Nov 15, 2013 at 7:12
@AshishNitinPatil - Bhai thats a jugaaad (Hope you understands) :D I want something standard. :) — python-coder
– python-coder, Commented Nov 15, 2013 at 7:34
Have a look at - stackoverflow.com/questions/298772/… I just wanted to show one of the methods (I knew it to be inefficient) — shad0w_wa1k3r
– shad0w_wa1k3r, Commented Nov 15, 2013 at 7:36

Carlangueitor · Accepted Answer · 2013-11-15 07:30:21Z

3

An easy way it's printing in a <script> tag:

<script>
  var value = {{ value|escapejs }};
</script>

Edited:

If you need this var in a separated file you need make a view for render the js file.

edited Nov 15, 2013 at 7:30

answered Nov 15, 2013 at 7:11

Carlangueitor

4252 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

shad0w_wa1k3r Over a year ago

He wants it in his pre-existing scripts which are separately stored from the templates.

Carlangueitor Over a year ago

He can use this var in any scope, for example: namespace.value = value || null;

Henrik Andersson Over a year ago

No, no. Never couple JavaScript with Django template language. Makes the code really tightly coupled plus this way clutters the global namespace (window), which is something you really don't want.

python-coder Over a year ago

@Carlangueitor - Firstly, Its not working, and yes as Ashish said, I want it in a separate JS file.

python-coder Over a year ago

Its still not working. Says SyntaxError: invalid property id var a = {{ value|escapejs}};

|

Henrik Andersson · Accepted Answer · 2013-11-15 07:14:23Z

3

Use an input field

<input type="hidden" class="hidden" value="{{ value }}" />

then your JavaScript

var val = document.querySelector(".hidden").value;

or you can put it in any html element and query for the value.

answered Nov 15, 2013 at 7:14

Henrik Andersson

47.5k16 gold badges102 silver badges94 bronze badges

2 Comments

Eevee Over a year ago

a useful approach is to stick it on a data- attribute. usually when you want to do this the value is related to a particular DOM element anyway.

Henrik Andersson Over a year ago

Apart from when using the data- attribute and you update it via jQuery (for example) then the original value is cached by jQuery so that's a bummer.

Collectives™ on Stack Overflow

how to get a python variable in JS Django

2 Answers 2

9 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

2 Comments

Linked

Related