CODEWITHSUNDEEP
javascriptpythonhtmljsonrest
M.Izzat
M.Izzat

Reputation: 1166

Add Array name in Django REST API

I have an REST API that look like this

HTTP 200 OK
Allow: GET, POST, HEAD, OPTIONS
Content-Type: application/json
Vary: Accept

[
    {
        "assign_to": 21,
        "task": 2,
        "start_date": null,
        "end_date": null
    },
    {
        "assign_to": 3,
        "task": 1,
        "start_date": "2017-06-15",
        "end_date": "2017-06-19"
    },
    {
        "assign_to": 3,
        "task": 8,
        "start_date": "2017-06-01",
        "end_date": "2017-06-08"
    }
]

now I want to load this data into a DHTMLX Gantt Chart but it need to be inside an array name {"data": []} so it will look like this

{"data": [
    {
        "assign_to": 21,
        "task": 2,
        "start_date": null,
        "end_date": null
    },
    {
        "assign_to": 3,
        "task": 1,
        "start_date": "2017-06-15",
        "end_date": "2017-06-19"
    },
    {
        "assign_to": 3,
        "task": 8,
        "start_date": "2017-06-01",
        "end_date": "2017-06-08"
    }
 ]
}

or else DHTMLX doesnt recognize the JSON file. so how can I do this? Below is my code

serializer.py

class GanttChartSerializer(serializers.ModelSerializer):
    class Meta:
        model = WorkOrder
        fields = ('assign_to', 'task', 'start_date', 'end_date')

API.py

class GanttChartList(APIView):
    def get(self, request, content_id, format=None):
        model_object = WorkOrder.objects.all().filter(parent_project_content=content_id)
        serializer = GanttChartSerializer(model_object, many=True)
        return Response(serializer.data)

    def post(self, request, content_id, format=None):
        serializer = GanttChartSerializer(data=request.data)
        if serializer.is_valid():
            serializer.save()
            return Response(serializer.data, status=status.HTTP_201_CREATED)
        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

Javascript

gantt.config.columns = [
            {name: "assign_to", label: "Assign To", align: "left", width: 70},
        ];

    function initializeGantt() {

    gantt.init("my_scheduler");
    gantt.load("/dashboard/ganttchart_list/5/?format=json");

HTML

<div id="my_scheduler" style='width:1405px; height:245px;'></div>

Any help is much appreciated thanks

Upvotes: 2

Views: 455

Answers (2)

Ilario Pierbattista
Ilario Pierbattista

Reputation: 3265

You can wrap your json file with {"data":[]} and let gantt parse it:

gantt.config.columns = [
            {name: "assign_to", label: "Assign To", align: "left", width: 70},
        ];

    function initializeGantt() {

    gantt.init("my_scheduler");
    $.get("/dashboard/ganttchart_list/5/?format=json", function(data) {
            gantt.parse({'data':data});
        });

Upvotes: 1

Chitharanjan Das
Chitharanjan Das

Reputation: 1333

You should be able to do this by changing what you pass into the Response() constructor, like so:

return Response({"data": serializer.data})

According to the Django Rest Framework documentation page for Response, the constructor will accept any Python primitives.

Upvotes: 3

Related Questions