How to use template tags in javascript? Django

Question

I am using python(Django), I created a template tag which returns an array of dictionary, now I want to use it in my javascript. It works fine when I call it from views by dumping in JSON format and parsing back in my javascript. But in template tag the case is different. So far, I tried couple of ways but all of them had issues, they are listed below.

First Way The most common, inside my template tag I dumped array into JSON format and called it in Javascript with JSON.parse

Code for following - Template Tag

@register.simple_tag(takes_context = True)
def messageRequest(context):
request = context['request']
messageData = Message.objects.all()
jsMessageData = []
if 'user' in request.COOKIES:
    currentUser = request.COOKIES.get('user')
i = 0
for i in range(len(messageData)):
    if messageData[i].receiver == currentUser:
        jsMessageData.append({"receiver":messageData[i].receiver, "sender":messageData[i].sender, "message":messageData[i].message})
    if messageData[i].sender == currentUser:
        jsMessageData.append({"receiver":messageData[i].receiver, "sender":messageData[i].sender, "message":messageData[i].message})
    i += 1

return dumps(jsMessageData)

Index.html - testVal = JSON.parse("{%messageRequest%}");

Result : I got error Uncaught SyntaxError: Unexpected token & in JSON at position 2

Second Way I tried calling {%messageRequest%} inside a normal javascript variable thinking that I will use that variable inside JSON function to prevent syntax error, but this gave me same error. So I concluded that I cannot use a template tag inside my javascript cause of its prefix(%), also I didn't find anything on this topic.

Third Way This time instead of sending JSON object from my template I converted my array into string and thought I would store it in a html tag, then call for its value in javascript and parse it into object.

Code for following - Template Tag

@register.simple_tag(takes_context = True)
def messageRequest(context):
request = context['request']
messageData = Message.objects.all()
jsMessageData = []
if 'user' in request.COOKIES:
    currentUser = request.COOKIES.get('user')
i = 0
for i in range(len(messageData)):
    if messageData[i].receiver == currentUser:
        jsMessageData.append({"receiver":messageData[i].receiver, "sender":messageData[i].sender, "message":messageData[i].message})
    if messageData[i].sender == currentUser:
        jsMessageData.append({"receiver":messageData[i].receiver, "sender":messageData[i].sender,    "message":messageData[i].message})
    i += 1

return str(jsMessageData)

Index.html - {%messageRequest%}

Javascript - testValues = JSON.parse(document.getElementById('test').innerHTML);

Results - This solved the problem for me, but I think this was the most inefficient way I could do.

So is there a way to directly use template tags into Javascript? Any suggestions are appreciated

Answer 1

Django template tags are interpreted on the server side.

JavaScript is interpreted on the browser side.

So Django template tags will not get interpreted unless you force the JavaScript file to be served by Django (instead of as a static file, which is what one usually does with JavaScript files.)

You can do this in two ways:

1. You can put JavaScript in your Django templates (presumably generating HTML pages). And inside that JavaScript, you can have further Django template tags which get interpreted and replaced before the HTML + JavaScript is sent to browser.

2. If you have a pure JavaScript file where you want to stick in Django template tags, you can do the following:

Instead of the URL of the JavaScript file pointing to a static JavaScript file, make it point to a Django view. That view should serve up a Django template. That template should contain JavaScript code with Django template tag markup. And now you're in busness.

---

However, consider this simpler (possibly cleaner) solution:

Instead of sticking Django template tags in your JavaScript file, just set a few appropriate JavaScript variables in your main page (header or footer), using Django template tags, and the simply use those variables in the unchanged/un-marked-up JavaScript.

eg: in the footer, include:

{% if request.user %} 
  currentUser = "{{request.user}}" 
{% else %} 
  currentUser = null; 
{% endif %}