How to access a Django variable in an external JavaScript?

Question

I am making a Django website. In it I am trying to access a variable in view.py file in an external static JS file linked to my template.

I tried using the syntax var is_empty = "{{is_empty}}", but it didn't work in a if statement where if(Number(is_empty) == 1), and also I tried creating a div in my body(with id = "temp") and adding an attribute data-dj = {{is_empty}} and then using var is_empty = document.getElementById("temp").getAttribute("data-dj");, but it was showing an error that cannot call getAttribute on null.

Please help!

Does this answer your question? Passing django variables to javascript — Zatigem
– Zatigem, Commented Nov 24, 2023 at 15:20

alpha · Accepted Answer · 2023-11-24 15:19:28Z

2

You can declare a variable within a script tag in your Django template and then access this variable in your external JavaScript.

In your Django template:

<script type="text/javascript">
    var myVar = "{{ django_variable }}";
</script>
<script src="path/to/your/external.js"></script>

In your external JavaScript file (external.js):

console.log(myVar); // Access the Django variable

Or you can use data attributes in HTML elements to store Django variables and then access these attributes from your external JavaScript.

In your Django template:

<div id="myElement" data-myvar="{{ django_variable }}"></div>
<script src="path/to/your/external.js"></script>

In your external JavaScript file:

var myVar = document.getElementById('myElement').getAttribute('data-myvar');
console.log(myVar);

answered Nov 24, 2023 at 15:19

alpha

59411 silver badges17 bronze badges

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

1 Comment

nigel222 Over a year ago

This ought to be obvious, but do take care when a script is passed through the Django template not to code {{ for anything except Django substitutions. Code { { where the two braces are JavaScript block delimiters. The whitespace is significant and the errors if you get this wrong are gnarly. Ditto } }

py_js_dev · Accepted Answer · 2023-11-24 15:17:18Z

0

If is_empty type is boolean then try like this:

if ("{{is_empty}}" === "true")

edited Nov 24, 2023 at 15:17

answered Nov 24, 2023 at 15:15

py_js_dev

849 bronze badges

Collectives™ on Stack Overflow

How to access a Django variable in an external JavaScript?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related