How to use Django variable in JavaScript file?

Question

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!

cor · Accepted Answer · 2016-04-18 08:38:47Z

23

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.

answered Apr 18, 2016 at 8:38

cor

3,39329 silver badges48 bronze badges

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

11 Comments

Yuqing Wei Over a year ago

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

cor Over a year ago

This is because you are using Tom as the variable name, when "Tom" is the content of the variable username

Yuqing Wei Over a year ago

No I was logged as the name "Tom", I used var username = {{user.get_username}} in the script but I got the error

cor Over a year ago

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.

Yuqing Wei Over a year ago

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:)

|

Space guy · Accepted Answer · 2021-08-04 19:08:21Z

10

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

edited Aug 4, 2021 at 19:08

answered Aug 4, 2021 at 11:10

Space guy

4156 silver badges16 bronze badges

Comments

Harsh Yadav · Accepted Answer · 2021-11-09 07:08:49Z

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>

answered Nov 9, 2021 at 7:08

Harsh Yadav

473 bronze badges

1 Comment

Majali Over a year ago

This is the correct one if the value is string

Collectives™ on Stack Overflow

How to use Django variable in JavaScript file?

3 Answers 3

11 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

11 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related