Javascript variables in Django HTML templates

Question

I\'m writing a Django app and while somewhat familiar with Django I\'m pretty unfamiliar with JavaScript. I\'m adding a few lines of JavaScript into one of my pages in orde

Answer 1

I assume what you're suggesting is putting both the JS script and its required data into the template (the data being injected into the JS script through string interpolation)

You can see how this can get quickly out of hand. Below I provide levels of code organization, in approximate ascending order (the further you go to better, in general)

1. Include your JS using a script tag, not embedded into the HTML

First: putting the JS into its own .js file and including it via before including their JS code.

Which isn't ideal either for many reasons, stemming from the fact that the data is being string-interpolated in the Django template:

3. Make JS pull the data through a Django (REST) API

However since you said you are familiar with Django, I'd like to suggest you create a view that returns the data that your client side JS needs in JSON format. E.g. something that returns {"info": "something"} on /api/info.

There's lots of ways to achieve this, here's a start (albeit might be outdated)

Then I'd have the script.js file read the data with a simple HTTP GET call. Lots of JS libraries can do this for you easily.

Some advantages of this approach

• Your code (the JS part) is independent from the data part (the JSON data)
• You can easily view/test what's being fed into your JSON, since it's just a HTTP GET request away
• Your HTML/JS part is completely static and hence cachable which improves the performance of loading the page.
• The Python data conversion to JSON is pretty straightforward (no interpolation kung-fu)