Django: using context variable in a script

Question

I have a class view that inherits from TemplateView and sets a context variable to a serialized list of items:

class MyView(TemplateView):
  def get_context_data(self, **kwargs):
    context = super(MyView, self).get_context_data(**kwargs)
    context['items'] = serializers.serialize("json", items) # assume items is an existing list
    return context

As is noted in this post you're supposed to be able to access Django variables from our Django templates in the following manner:

<script>var items = {{ items }};</script>

However I am getting a JavaScript error, which I assume is caused because of automatic escaping:

Uncaught SyntaxError: Unexpected token &

I also tried using the filter:

<script>var items = {{ items | escapejs }};</script>

Only to find another error, this time a Django one (TemplateSyntaxError):

Could not parse the remainder: ' |  escapejs' from 'items | escapejs'

How can I solve this issue?

PS: I am using Django 1.4. (and no, I cannot upgrade it to the most recent version).

Instead of passing the json through the template to your script you could add an endpoint view which serializes the data you need and request this from javascript itself with something like $.getJSON("your_view_url", function(data) { } — Jack Evans
– Jack Evans, Commented Sep 13, 2016 at 9:55
@SebastianBurzyński I get the same error than with escapejs: Could not parse the remainder: ' | safe' from 'items | safe' — dabadaba
– dabadaba, Commented Sep 13, 2016 at 9:56
@JackEvans that's what I initially did, I ajax'ed the items as JSON in another request, but it seems redundant now, since I can do it all in just one request. — dabadaba
– dabadaba, Commented Sep 13, 2016 at 9:56
As Daniel said, you cannot use spaces in between your "|" sign. — sebb
– sebb, Commented Sep 13, 2016 at 9:58

Daniel Roseman · Accepted Answer · 2016-09-13 09:55:53Z

3

You can't use spaces between a template variable, the filter character, and the filter itself. So it should be {{ items|escapejs }}.

Although as Sebastian points out, you probably want {{ items|safe }} instead.

answered Sep 13, 2016 at 9:55

Daniel Roseman

602k68 gold badges910 silver badges923 bronze badges

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

2 Comments

dabadaba Over a year ago

Oh wow that was it. Can you explain what were the whitespaces causing? And why should safe be used instead of escapejs?

Daniel Roseman Over a year ago

The template parser is pretty basic, it just isn't clever enough to deal with spaces there. escapejs adds additional escaping for characters that have meaning in JS; you want the opposite, ie to pass the JSON exactly as is without escaping.

Dimitris Kougioumtzis · Accepted Answer · 2016-09-13 10:32:43Z

1

<script>
  var items = "{{items}}";

</script>

edited Sep 13, 2016 at 10:32

answered Sep 13, 2016 at 10:15

Dimitris Kougioumtzis

2,4451 gold badge26 silver badges42 bronze badges

Collectives™ on Stack Overflow

Django: using context variable in a script

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related