How can I avoid this Unexpected token error when using django/javascript?

Question

I am trying to pass some data from my django app into a javascript following the answers this question

views.py

context['username'] = json.dumps(request.user.username)

test_script.js

document.write('Script working')
username = {{ username|safe }};

But in console I get the error

Uncaught SyntaxError: Unexpected token '{'

What am I missing?

You can't use jinja2 in javascript. Simply create your js variable in your html in tags, then place your script below and you can use that variable — token, Jun 26 '20 at 11:39

token · Accepted Answer · 2020-06-26T12:01:37.677

1

Let's say this is your HTML:

<html>
  <body>
    .
    .
    .
  </body>
  <script>
    var username = "{{ username|safe }}"
  </script>
  <script src="path/to/your/script.js"></script>
</html>

Place your username variable in your html, then you can access it in your script file.

edited Jun 26 '20 at 12:01

answered Jun 26 '20 at 11:42

token

903
1
9
23

Tried document.write(username); and get error: Uncaught ReferenceError: username is not defined – Psionman Jun 26 '20 at 11:50
```console.log(username)``` ? – token Jun 26 '20 at 11:51
or try this instead: ```var username = "{{ username|safe }}"``` – token Jun 26 '20 at 11:52
1

Please add the comment suggestion to answer - it helped a lot – Psionman Jun 26 '20 at 12:00
Is 'var' redundant? (i'm a pythonista and as you can see know little about js) – Psionman Jun 26 '20 at 13:48

score 0 · Answer 2 · answered Jun 26 '20 at 16:53

Django already has a solution for this. In your template,assuming you are extending the base template

....
{{ username|json_script:'username'}}

Then inside your javascript file

var username = JSON.parse(document.getElementById('username').textContent)

For more information about json script check out https://docs.djangoproject.com/en/3.0/ref/templates/builtins/#json-script

How can I avoid this Unexpected token error when using django/javascript?

2 Answers2