Django AJAX call: Referencing Table in JS

Question

Is there a way I can reference a list containing data from my database (item_list = inventory.objects.order_by('name')) in my jquery AJAX call?

This is my code:

/models.py:

class phonebook(models.Model):
    name = models.Charfield(max_length=200)
    phone_number = models.CharField(max_length=100)

/views.py:

def phonebook_home(request):
    global phonebook
    phonebook = phonebook.objects.order_by('name')

def get_next_3_contacts(request):
    returnedContacts = phonebook[contactIndex:contactIndex+3]
    return HttpResponse(phonebook)

/main.js:

var = ajax_call {
    type: 'GET'
    url: DEFINED_URL 
    data: {
        index: contactIndex
    },
    dataType: 'html'
    success: function (returned, textStatus_ignored, jqXHR_ignored) {
        var contactIndex = 0
        function phonebook_list(name, phone_number) {
            "<li>" + name + " : " + phone_number + "</li>"
        }
        for(var index=0; index < 3; index++) {
            var name = phonebook[index].name
            var phone_number = phonebook[index].phone_number
            $("ul").append(phonebook_list(name, phone_number))
        }
        contactIndex += 3
     }

The phonebook[index].name / .phone_number returns "undefined" on my page. I want to keep my js file separate from my template file as it will be easier for me to debug, but unfortunately, this problem has stumped me. I also inputted an alert to test out if any data was being returned from the data base, which only returns a string containing the names of the contacts with no spacing in between contact names. Ex: "JaredSarahJohn".

All help and any bit of advice is appreciated!

Answer 1

A couple of things need to be cleaned up in order for this solution to work:

Your idea that global phonebook will be available from within get_next_3_contacts() is incorrect. When you make the AJAX call that will ultimately invoke get_next_3_contacts() the variable phonebook is no longer available. It went out of scope when the call to phonebook_home() completed.

What's the solution? Change phonebook_home() to accept an offset and count parameters. Have it hit the database and return the requested quantities. This is called pagination and is something you should get familiar with!

def phonebook_home(request, offset, count):
    phonebook = phonebook.objects.all()[offset:offset+count]

But how do we get those results down to your AJAX handler? You can't just "return" a list of objects to the HTTPResponse() function - it's looking for text to render, not Model objects.

import json
from django.http import JsonResponse
def phonebook_home(request, offset, count):
    status = "OK"
    return_data = ""

    try:
        phonebook = phonebook.objects.all()[offset:offset+count]
        return_data = json.dumps(phonebook)
    exception:
        status = "UH OH"

    return JsonResponse({'data': return_data, 'status': status)