18

I know that we can use Django variable in templates(html files) with {{variable}}, but how can I use a variable Django in a Javascript file that included in the template?

For example here is my template.html:

<html>
<head>
<script src="/static/youtube.js"></script>
...

how can I use variable {{user.get_username}} in youtube.js? not in template.html cause I did't wrote my script here...and when I use {{user.get_username}} in Javascript file youtube.js it caused an error "invalid token { ", but in the template it works fine.

Thanks a lot!

Yuqing Wei
  • 289
  • 1
  • 3
  • 12

3 Answers3

22

You need to print it before your script tag

<html>
<head>
<script>
    var username = {{user.get_username}};
</script>
<script src="/static/youtube.js"></script>
...

Then you can use the username variable inside your youtube.js as it is declared as a javascript global variable.

cor
  • 3,323
  • 25
  • 46
  • in fact later I got un error, for example my username is Tom, there is what in the console window: Uncaught ReferenceError: Tom is not defined – Yuqing Wei Apr 18 '16 at 09:44
  • This is because you are using `Tom` as the variable name, when "Tom" is the content of the variable `username` – cor Apr 18 '16 at 09:47
  • No I was logged as the name "Tom", I used var username = {{user.get_username}} in the script but I got the error – Yuqing Wei Apr 18 '16 at 09:53
  • If you get an error saying that Tom is not defined, is because you are trying to use it as a variable. Please, show me what you are trying and I will try to help you, but this is not related with your original question. – cor Apr 18 '16 at 09:55
  • I was trying to transfer the username to my javascript file(youtube.js) so that the user can delete his own tags that added on a video youtube, so the script must check if the username and the owner of the tag is equal. – Yuqing Wei Apr 18 '16 at 10:04
  • And how are you doing that comparison? – cor Apr 18 '16 at 10:06
  • 3
    I defined a variable global username in the template as you proposed and my tag have an attribute owner name...it seems that I should use var username = "{{user.get_username}}" cause owner name is string, thank you very much my problem solved:) – Yuqing Wei Apr 18 '16 at 10:11
  • with the information you have given to me, I would say you are trying to do something like: `if (username === Tom){...}`. But as I told you before, `Tom` is not a variable, is a string. It should be something like `if(username === 'Tom'){ ... }` or replace `'Tom'` with another variable. – cor Apr 18 '16 at 10:12
  • Would this work with `let` and `const`, instead of `var`. I hear it is not good practise to mix `var` and the first two, and I'd rather use the newer syntax. – sesodesa Nov 21 '18 at 11:18
  • @TheSodesa of course, would work. But check the browser compatibility. https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/let – cor Nov 21 '18 at 11:37
  • it does work, but still wondering if any better way. – Yang Dec 07 '21 at 13:33
8

With the newer versions of Django they implemented a way of doing this with. This way you'll also be protected from XSS

https://docs.djangoproject.com/en/3.2/ref/templates/builtins/#json-script

To your Django variable add |json_script:'id_of_the_script_tag'

{{ cart_total|json_script:'cart_total' }}

This will create an HTML <script> tag with the id=cart_total

In the javascript file parse the JSON and save it in your variable

const cart_total = JSON.parse(document.getElementById('cart_total').textContent);

Space guy
  • 375
  • 5
  • 14
3

The above solution is Almost Right just need to change the Django variable to String then it will work for sure.

<html>
<head>
<script>
    var username = "{{user.get_username}}";
</script>
<script src="/static/youtube.js"></script>
Harsh Yadav
  • 51
  • 3