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 <javascript> tags, then place your script below and you can use that variable — token
– token, Commented Jun 26, 2020 at 11:39

token · Accepted Answer · 2020-06-26 12:01:37Z

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, 2020 at 12:01

answered Jun 26, 2020 at 11:42

token

9331 gold badge9 silver badges23 bronze badges

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

5 Comments

Psionman Over a year ago

Tried document.write(username); and get error: Uncaught ReferenceError: username is not defined

token Over a year ago

console.log(username) ?

token Over a year ago

or try this instead: var username = "{{ username|safe }}"

Psionman Over a year ago

Please add the comment suggestion to answer - it helped a lot

Psionman Over a year ago

Is 'var' redundant? (i'm a pythonista and as you can see know little about js)

castin · Accepted Answer · 2020-06-26 16:53:03Z

0

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

answered Jun 26, 2020 at 16:53

castin

3134 silver badges9 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related