How to successfully pass a Json to render and manipulate it in Django?

Question

I am trying to return a Json response from a POST request but I am encountering various errors in the path.

First, I have the following view

class ChartData8(APIView):
    def tickets_per_day_results(request):
        if request.method == "POST":
            template_name = 'personal_website/tickets_per_day_results.html'
            year = request.POST.get('select_year', None)
            week = request.POST.get('select_week', None)
            ....do stuff...
            data = {"label_number_days": label_number_days,
                    "days_of_data": count_of_days}
        return render(request,template_name,JsonResponse(data))

that calls the template tickets_per_day_results.html which contains an Ajax request:

$.ajax({
    method: "POST",
    url: endpoint,
    dataType: 'json',
    contentType: "application/json",
    headers: {"X-CSRFToken": $.cookie("csrftoken")},
    success: function(data){
        console.log(data)
        label_number_days = data.label_number_days
        days_of_data = data.days_of_data
        setChart()

    },
    error: function(jqXHR,error_data, errorThrown){
        console.log("error on data")
        console.log(error_data)
        console.log(JSON.stringify(jqXHR))
        console.log("AJAX error: " + error_data + ' : ' + errorThrown)
    }

but this combination throws me context must be a dict rather than JsonResponse error.

I tried various alternatives:

Alternative 1: Instead of JsonResponse I used Response like the following:

class ChartData8(APIView):
    def tickets_per_day_results(request):
        if request.method == "POST":
            template_name = 'personal_website/tickets_per_day_results.html'
            year = request.POST.get('select_year', None)
            week = request.POST.get('select_week', None)
            ....do stuff...
            data = {"label_number_days": label_number_days,
                    "days_of_data": count_of_days}
        return render(request,template_name,Response(data))

but this threw out the error context must be a dict rather than Response.

Alternative 2: Instead of JsonResponse and Response I tried to convert the object to a dict like the following:

class ChartData8(APIView):
    def tickets_per_day_results(request):
        if request.method == "POST":
            template_name = 'personal_website/tickets_per_day_results.html'
            year = request.POST.get('select_year', None)
            week = request.POST.get('select_week', None)
            ....do stuff...
            data = {"label_number_days": label_number_days,
                    "days_of_data": count_of_days}
        return render(request,template_name, dict(Response(data)))

but this threw out the error The response content must be rendered before it can be iterated over.

Alternative 3: Instead of 1 and 2 I tried to pass data without JsonResponse nor Response:

class ChartData8(APIView):
    def tickets_per_day_results(request):
        if request.method == "POST":
            template_name = 'personal_website/tickets_per_day_results.html'
            year = request.POST.get('select_year', None)
            week = request.POST.get('select_week', None)
            ....do stuff...
            data = {"label_number_days": label_number_days,
                    "days_of_data": count_of_days}
        return render(request,template_name, data)

but this threw out the error parsererror from the ajax request because this means you simply return a string or another value, it is not really Json, so the parser fails when parsing it. You can avoid this error by removing dataType:'json' from the Ajax request (solution from parsererror Ajax) but this will not allow me to manipulate my datasets from my template tickets_per_day_results, that is,

remove dataType:json

$.ajax({
    method: "POST",
    url: endpoint,
    headers: {"X-CSRFToken": $.cookie("csrftoken")},
    success: function(data){
        console.log(data)
        label_number_days = data.label_number_days
        days_of_data = data.days_of_data
        setChart()

    },
    error: function(jqXHR,error_data, errorThrown){
        console.log("error on data")
        console.log(error_data)
        console.log(JSON.stringify(jqXHR))
        console.log("AJAX error: " + error_data + ' : ' + errorThrown)
    }

then I cannot manipulate my datasets that are found below the Ajax request:

data: {
        labels: label_number_days,
        datasets :
            [{
                label: 'User_001',
                data [days_of_data[0],days_of_data[1],days_of_data[2],days_of_data[3],days_of_data[4],days_of_data[5],days_of_data[6]],
                backgroundColor: 'rgba(255, 99, 132, 0.6)',
                borderColor: '#777',
                borderWidth: 1,
                hoverBorderWidth: 3,
                hoverBorderColor: '#000'
            },

because you found Uncaught TypeError: Cannot read property '0' of undefined.

This has been a tedious path and I am running out of ideas (and patience). If anyone can suggest me any other alternative then that will give me some health relief.

Update Tickets per day results html file

{% extends "personal_website/header.html"%}

Dronix · Accepted Answer

I think that you're using the wrong method for returning data in JSON format. In the code :

render(request,template_name,JsonResponse(data))

In the documentation of Django here. The render shortcut is used to render an Html Template with dictionary data to update the page.

According to the django code I guess you use Django rest Framework. In order to send JSON data you should use the example here DRF example response in order to send JSON data to the page.

How to successfully pass a Json to render and manipulate it in Django?

Answers (1)

Related Questions