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 order to include a map.

The script simply encompasses initializing the map and then adding markers according to information saved in my database.

Given that there is so little code, would it still be considered bad practice to leave the script in the HTML template and pass information from my database using {{info}}?

If so, what method would you consider to be better?

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 <script> tag is easy. So let's do that. Moreover, modern browsers can load files in parallel, so it's a plus to load the HTML and JS files simultaneously.

2. Avoid feeding the data into the JS using a Django template

Now the other problem I've seen people do is pass the data into the JS using a <script>data = {"info": "something"}</script> 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)