Rendering a JSON string inside a script with Django

Building a list of form submissions in Django last night was causing me some issues. This is likely a common issue for people and something most people know already, but I wasn’t able to find a nice answer online after my searching, so here’s my solution for others to benefit from.

My scenario:

  • Build a list of submissions inside the view
  • Pass these into the template, so that Vue could render the details

I could have made the decision to load the page first, then use Axios to get the list of submissions, but I decided aginst that for now.

As such, I had my view setup along these lines:

from django.shortcuts import render
import json
from myapp.models import MyModel

def my_view(request):
    my_models = myModel.objects.all()
    model_list = []
    for model in my_models:
        new_model = {
            'picture': model.picture

        'models': json.dumps(model_list)

    return render(request, 'my_template.html')

(I would like to use model_to_dict from django.forms.models here but UUIDs don’t work nicely in my scenario…)

My Vue JS:

var models= new Vue(
        el: '#models',
        delimiters: ["[%", "%]"],
        data: {
            models: model_list

End of course, the template:

The problem here was though, Django was escaping the JSON string automatically. After doing some googling I found many solutions that said to use the escapejs flag in conjunction with JSON.parse() but I wasn’t satisfied with that.

Django has a tag for disabling the auto-escaping it does though. This allows you to do the following:



And voila! Django renders the JSON String in such a way that Javascript can work with it right away, without having to use JSON.parse on it.