I have a dhtmlx gantt chart in my page, normally it would have work perfectly but now when I have a JSON file with nested array all my output would be unrecognized instead. I'm trying to populate the official name.
Can Anyone help me with this? Thank you very much.
JSON
{
"data": [
{
"assign_to": {
"id": 3,
"employee_id": "28141",
"official_name": "Hal Jordan",
},
"task": {
"id": 1,
"name": "Modeling",
"description": "3d modeling work"
},
"start_date": "2017-06-15",
"end_date": "2017-06-19"
},
{
"assign_to": {
"id": 3,
"employee_id": "28144",
"official_name": "Kyle Rayner",
},
"task": {
"id": 8,
"name": "Composting",
"description": null
},
"start_date": "2017-06-01",
"end_date": "2017-06-08"
}
]
}
Javascript
gantt.config.columns = [
{name: "assign_to.official_name", label: "Assign To", align: "left", width: 70},
];
function initializeGantt() {
gantt.init("my_scheduler");
gantt.load("/dashboard/ganttchart_list/5/?format=json");
}
initializeGantt();
HTML
<div id="my_scheduler" style='width:1405px; height:245px;'></div>
dhtmlx gantt doesn't support nested structure, so you'll need to preprocess your items before loading them to gantt. Since you know which format you have and which format is expected by gantt (https://docs.dhtmlx.com/gantt/desktop__supported_data_formats.html#json ) it shouldn't be a problem.
The most important thing
when you define column name like this:
{name: "assign_to.official_name", label: "Assign To", align: "left", width: 70},
column name can't be mapped to a property of a nested object, so you'll either have to flatten structure during loading, very roughly, it can be done in following way: http://snippet.dhtmlx.com/129d2e043
Or define a column template which would take value from nested object: http://snippet.dhtmlx.com/9e8e65e85