Scheduler task with similar name override its previous one

Question

I have a scheduler in my page. It is populating data from a Nested API JSON file. It works almost perfectly but the data keep getting overwrite by a new data, for example if I created a task with the name Modelling then the previous one with the same name isn't displayed. How can I fix this

Below is my code, any help is much appreciated

HTML

<div id="my_scheduler" style='width:1585px; height:325px;'></div>

javascript

function prepareData(rawData){

 var ganttData = { data: [], links: []};

  for(var i = 0; i < rawData.data.length; i++){
    var task = {}
    gantt.mixin(task, rawData.data[i]);
    gantt.mixin(task, rawData.data[i].task);

    task.text = task.name;
    ganttData.data.push(task);
  }
  return ganttData;
}

 gantt.config.columns = [
    {name: "official_name", align: "left", template: function(data){
     if(data.assign_to) return data.assign_to.official_name;
    }, label: "Assign To", tree:true, width: 200},
    {name: "text", label: "Task", align: "left", hide:true, width: 100},
    {name: "start_date", width: 90},
    {name: "end_date", align: "left", label: "End Date", width: 90},
    {name: "duration", width: 50}
    ];

gantt.config.xml_date = "%Y-%m-%d";
function initializeGantt(content_id) {
    scheduler = gantt.init("my_scheduler", new Date('2017, 01, 01'), new Date('2017, 12, 31'));
    data = localStorage.getItem("id");
    $.get("/dashboard/ganttchart_list/"+data+"/?format=json", function(result) { gantt.parse(prepareData(result)); });

API

    {
        "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"
            },
            {
                "assign_to": {
                    "id": 2,
                    "employee_id": "28142",
                    "official_name": "John Stewart",
                },
                "task": {
                    "id": 8,
                    "name": "Modelling",
                    "description": null
                },
                "start_date": "2017-06-22",
                "end_date": "2017-06-25"
            }
        ]
    }

Answer 1

Most probably you end up with multiple items with the same id in your array, e.g. you have two items with "task":{ "id":8 , ...}

Since this value is used as an id of the item loaded into gantt, you'll get following:

ganttData.data.push({ "id":8, "text":"Composting",...});
ganttData.data.push({ "id":8, "text":"Modelling",...});

And while ganttData.data array will contain both items, items with the same value of id property will be merged into one once loaded into gantt.

If you want these items to be displayed separately, you'll need to give them unique ids and probably save the original item.task.id into some other property in order to be able to link record to original task that came from your backend, e.g.

function prepareData(rawData){

 var ganttData = { data: [], links: []};

  for(var i = 0; i < rawData.data.length; i++){
    var task = {}
    gantt.mixin(task, rawData.data[i]);
    gantt.mixin(task, rawData.data[i].task);

    task.text = task.name;
    task.taskId = task.id;//!!!important
    task.id = gantt.uid();//!!!important

    ganttData.data.push(task);
  }
  return ganttData;
}