Add Array name in Django REST API

Question

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

I'm sorry, can you elaborate on that, I've editted my question with my HTML and javascript as well — M.Izzat
– M.Izzat, Commented Jun 19, 2017 at 8:23

Chitharanjan Das · Accepted Answer · 2017-06-19 08:25:22Z

3

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.

answered Jun 19, 2017 at 8:25

Chitharanjan Das

1,35310 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ilario Pierbattista · Accepted Answer · 2017-06-19 08:27:19Z

1

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});
        });

answered Jun 19, 2017 at 8:27

Ilario Pierbattista

3,2752 gold badges36 silver badges43 bronze badges

2 Comments

M.Izzat Over a year ago

Hello @Ilario Pierbattista, thank you so much for your reply, it works, but so does the answer below, I wish I can select both as answered but unfortunately i cant. again thanks a lot.

Ilario Pierbattista Over a year ago

No problem :) have a nice day

Collectives™ on Stack Overflow

Add Array name in Django REST API

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related