Django template tags in JavaScript - invalid syntax without quotes, invalid syntax with quotes

Question

It is possible you have Javascript read vars from Django template tags like var spec = "{{ foo }}";.

However, if foo needs to be a JSON object. it becomes like this:

var spec = "{"2": {"guid": 2, "contentBlocks": {"2_1": {"guid": "2_1", "type": "list"}}}}";

The preceding and closing quotes make this an invalid JavaScript syntax, however, if I leave them out, it is also an invalid syntax var spec = {{ foo }};

What would be the best way to solve this problem? Either to have foo output the complete <script></script> block, or to have JavaScript request this object from the server, instead of outputting it via a template tag? ......

Mark Snidovich · Accepted Answer · 2010-11-11 10:31:20Z

5

If for some reason you wanted it to be a string, try single quotes:

var spec = '{"2": {"guid": 2, "contentBlocks": {"2_1": {"guid": "2_1", "type": "list"}}}}';

If you want it to be a JavaScript object, don't use the quotes at all.

var spec = {"2": {"guid": 2, "contentBlocks": {"2_1": {"guid": "2_1", "type": "list"}}}};

This is valid syntax.

However, Django will escape the quotes if you don't mark it as safe. So, say that json block is the_json in your template,

var spec={{ the_json |safe }}

is what you want. Without the safe filter, the quotes would be output as ", invalidating the JSON.

answered Nov 11, 2010 at 10:31

Mark Snidovich

1,0557 silver badges11 bronze badges

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

2 Comments

Izz ad-Din Ruhulessin Over a year ago

I usually use mark_safe() in the return values, or would you not recommend that?

Mark Snidovich Over a year ago

Either way works fine, of course - just depends if you'd rather do it in the template or the view.

Daniel Roseman · Accepted Answer · 2010-11-11 10:27:11Z

2

If it's a JSON object, it doesn't need to be quoted at all. JSON syntax is valid Javascript syntax (although of course the reverse is not necessarily true).

var spec = {{ foo }};

is perfectly good if foo evaluates to a JSON string.

answered Nov 11, 2010 at 10:27

Daniel Roseman

602k68 gold badges910 silver badges923 bronze badges

Comments

Tomasz Zieliński · Accepted Answer · 2010-11-11 12:25:52Z

1

The other answers are perfectly ok if JS is embedded in a template. And if you have a separate .js files that are served statically, then you can expose the nesessary variables in your templates:

<script type="text/javascript">
    var g_foo = {{ foo }};
</script>

-- and then in .js use this g_foo.

answered Nov 11, 2010 at 12:25

Tomasz Zieliński

16.4k8 gold badges64 silver badges85 bronze badges

Comments

Izz ad-Din Ruhulessin · Accepted Answer · 2010-11-12 09:53:43Z

0

Thanks for your answers. It turned out to be that Dreamweaver tells me syntax is invalid, but when executing the script it works perfect.

answered Nov 12, 2010 at 9:53

Izz ad-Din Ruhulessin

6,2557 gold badges30 silver badges28 bronze badges

Collectives™ on Stack Overflow

Django template tags in JavaScript - invalid syntax without quotes, invalid syntax with quotes

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related