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:
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 = { 'id': model.id, 'name': model.name, 'picture': model.picture } model_list.append(new_model) context={ '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:
{% extends 'base.html' %} {% load static %} {% block content %} <div id="models" class="content"> <template v-if="models"> <h2>Models</h2> <table class="table table-hover"> <thead> <tr> <th>Photo</th> <th>Name</th> </tr> </thead> <tbody> <tr v-for="model in models"> <td scope="row"><img :src="model.picture"></td> <td><a :href="model.id">[% model.name %]</a></td> </tr> </tbody> </table> </template> </div> <script> var models = {{ models }}; </script> <script src="{% static 'js/model_list.js' %}"></script> {% endblock %}
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:
<script> {% autoescape off %} var model_list = {{ models }}; {% endautoescape %} </script>
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.