How do I send an array of objects from a django class based view to my index.html file?

Question

The Goal:

I want to use FullCalendar( https://fullcalendar.io/ ) to display event objects from my database. FullCalendar accepts an array of event objects as a property.

The Problem I'm having:

I can send context data back to the template with the event objects but as far as I know I can only interact with the data using Django's template tagging system. *EDIT: When I replace the hardcoded array with ptoHistory I receive the following error in the chrome console:

jquery-3.1.1.min.js:2 Uncaught ReferenceError: ptoHistory is not defined at HTMLDocument. ((index):141) at j (jquery-3.1.1.min.js:2) at k (jquery-3.1.1.min.js:2)

index.html:

{% extends 'base.html' %}

{% block content %}

//ACCESSING THE CONTEXT DATA LIKE THIS WORKS BUT I CAN'T USE ptoHistory IN MY FULLCALLENDAR SCRIPT 
{% for history in ptoHistory %}
 <li>{{obj.leave_type}}</li>
{% endfor %}

<div class="container">
  <div id="calendar">
    <!-- Calendar is injected here -->
  </div>

<!----------------------- SCRIPTS ----------------------------->
<script>

$(document).ready(function() {

  $('#calendar').fullCalendar({
    defaultView:'month',
    editable: true,
    // MY ARRAY OF OBJECTS WILL REPLACE THIS HARDCODED ARRAY
    events: [
      {
        title: 'All Day Event',
        start: '2017-01-12',
      },
      {
        title: 'Meeting',
        start: '2017-01-13T10:30:26',
        end: '2014-06-13T12:30:00'
      },
    ],


  });

});

</script>


{% endblock content%}

IndexView.py:

class IndexView(FormView):
    template_name = 'accounts/index.html'
    form_class = PtoRequestForm
    success_url = 'login/'

    def form_valid(self, form):
        form.save()
        return super(IndexView, self).form_valid(form)

    def get_context_data(self, **kwargs):
        context = super(IndexView, self).get_context_data(**kwargs)
        context['ptoHistory'] = PtoHistory.objects.all()
        print(context['ptoHistory'])
        return context

Could someone point me in the right direction?

Answer 1

You are right, it won't work. Django template system is able to process python objects because they are executed already before the template is finished rendering.

You could still assign python list in javascript, though, but not with python objects but json string. The solution is basically compose for only what you need in the views using values() then . I don't know what fields do you need for PtoHistory , but you could do:

# views.py
import json
def get_context_data(self, **kwargs):
    context = super(IndexView, self).get_context_data(**kwargs)
    ptoHistory = json.dumps(list(PtoHistory.objects.values()))
    # or do this if you only need several fields' value
    # ptoHistory = json.dumps(list(PtoHistory.objects.values('field1', 'field2')))
    context['ptoHistory'] = ptoHistory

    return context

// in javascript
$(document).ready(function() {

  $('#calendar').fullCalendar({
    defaultView:'month',
    editable: true,
    var histories = {{ ptoHistory|safe }};