How to load gantt chart from REST API

Gantt
#1

I’m trying to load my gantt chart from an REST API framework but so far its not working. How can I solves this and how can I get all the data on a nested object for example the name: “assign_to/official_name”,?

Thank you for all your help.

HTML :

   [code] gantt.config.columns = [
        {name: "assign_to.employee_id", label: "Employee ID", align: "left", width: 70},
        {name: "assign_to.official_name", label: "Employee Name", tree: true, align: "left", width: 250}
    ];

    function initializeGantt() {

    gantt.init("my_scheduler", new Date('2017, 01, 01'), new Date('2017, 12, 31'));
    gantt.load("http://127.0.0.1/test/work_list/5/");
    gantt.showDate(new Date('2017, 09, 01'));
}

    initializeGantt();
    </script>[/code]

REST API :

[code][
{
“id”: 11,
“start_date”: “2017-06-1”,
“end_date”: “2017-06-7”,
“parent_project_content”: {
“id”: 5,
“name”: “Jarvis”,
“description”: “AI Model”,
“task”: {
“id”: 2,
“name”: “Texturing”,
“description”: null
},
}
“assign_to”: {
“id”: 21,
“employee_id”: “28141”,
“official_name”: “Hal jordan”,
},
},
{
“id”: 14,
“start_date”: “2017-06-15”,
“end_date”: “2017-06-19”,
“parent_project_content”: {
“id”: 5,
“name”: “Jarvis”,
“task”: {
“id”: 1,
“name”: “Modeling”,
“description”: “3d modeling work”
},
}
“assign_to”: {
“id”: 92,
“employee_id”: “28144”,
“official_name”: “Kyle Rayner”,

    },
}

][/code]

#2

Hello,
looks like your API returns data not in a format expected by dhtmlx gantt
Gantt expects json like the following - docs.dhtmlx.com/gantt/desktop__ … .html#json -
Rows are loaded in a plain array, and hierarchy is defined by ‘parent: parentId’ property. In your case, you seem to have a hierarchical structure, which is not what expected

you can check some working demos on github, e.g. github.com/DHTMLX/gantt-node-mysql
dhtmlx.com/blog/integrating-gan … and-mysql/

If you don’t have control over format used by REST API, you’ll have to load data manually, then somehow convert it to the format compatible with dhtmlx gantt and put the result into gantt using gantt.parse(data);
docs.dhtmlx.com/gantt/api__gantt_parse.html

#3

Hi Aliaksandr,

I see, so thats why it won’t load, thanks for your output I will try to create a different JSON data manually, but I need to figure out how to make it dynamic since I’ll having a lot of data which also user can create and edit new task.