Dynamic Data for Gantt Chart Hierarchy does not work

[HassanEmam]

Good day,

I am working with ng-Gantt to present programme pulled from an api. the api has two end nodes that I pull data from the first is wbs for the work breakdown structure and results need to be presented in hierarchy
The second node is activity which will fit below one of the WBS codes mentioned above.
The hierarchy or the parent child relationships do not work when the data comes dynamically from the api. but it works as expected if I hard coded the data.

Can you please direct me on how to resolve this issue.

initialData() {

    var temp1 = [];
    var temp2 = [];

    if (this.wbss.length > 0) {
      for (var i = 0; i < this.wbss.length; i++) {
        var dataObj = {
          'pID': "7a2930e2-c9f4-4a43-98f4-f970420b7e49",
          'pName': 'ggg',
          'pStart': '2017-02-20',
          'pEnd': '2017-02-28',
          'pClass': 'ggroupblack',
          'pLink': '',
          'pMile': 0,
          'pRes': 'WBS',
          'pComp': 100,
          'pGroup': 1,
          'pParent': '0',
          'pOpen': 0,
          'pDepend': '',
          'pCaption': '',
          'pCode': '',
          'pNotes': 'Some text'
        };

        var public_id = this.wbss[i].public_id;
        var parent_public_id = this.wbss[i].parent_public_id;

        dataObj.pID = public_id;
        dataObj.pName = this.wbss[i].name;

        dataObj.pParent = (parent_public_id == null) ? '0' : parent_public_id;
        dataObj.pCode = this.wbss[i].code;
        dataObj.pGroup = 0;
        console.log(dataObj)
        temp1.push(dataObj);
      }
    }

    if (this.activitys.length > 0) {
      for (var i = 0; i < this.activitys.length; i++) {
        var dataObj = {
          'pID': "7a2930e2-c9f4-4a43-98f4-f970420b7e49",
          'pName': 'ggg',
          'pStart': '2017-02-20',
          'pEnd': '2017-02-28',
          'pClass': 'ggroupblack',
          'pLink': '',
          'pMile': 0,
          'pRes': 'WBS',
          'pComp': 100,
          'pGroup': 1,
          'pParent': '0',
          'pOpen': 0,
          'pDepend': '',
          'pCaption': '',
          'pCode': '',
          'pNotes': 'Some text'
        };
        
        dataObj.pID = this.activitys[i].public_id;
        dataObj.pName = this.activitys[i].title;

        dataObj.pParent = this.activitys[i].wbs_public_id;
        dataObj.pCode = this.activitys[i].code;
        dataObj.pGroup = 0;
        dataObj.pStart = this.activitys[i].start;
        dataObj.pEnd = this.activitys[i].finish;
        console.log(dataObj);
        temp2.push(dataObj);
      }
    }

    var temp = temp1.concat(temp2);
    this.data = temp;
    
    this.data1 = [{
      'pID': "7a2930e2-c9f4-4a43-98f4-f970420b7e49",
      'pName': 'ggg',
      'pStart': '2017-02-20',
      'pEnd': '2017-02-28',
      'pClass': 'ggroupblack',
      'pLink': '',
      'pMile': 1,
      'pRes': 'WBS',
      'pComp': 100,
      'pGroup': 1,
      'pParent': '0',
      'pOpen': 0,
      'pDepend': '',
      'pCaption': '',
      'pCode': '',
      'pNotes': 'Some text'
    }, {
      'pID': "ede60398-5674-499d-83b3-b1878f8b8952",
      'pName': 'gggss',
      'pStart': '2017-02-20',
      'pEnd': '2017-02-28',
      'pClass': 'ggroupblack',
      'pLink': '',
      'pMile': 1,
      'pRes': 'WBS',
      'pComp': 100,
      'pGroup': 1,
      'pParent': "7a2930e2-c9f4-4a43-98f4-f970420b7e49",
      'pOpen': 1,
      'pDepend': '',
      'pCaption': '',
      'pCode': '',
      'pNotes': 'Some text'
    }, {
      'pID': "92903e24-897a-4f9c-8d35-97392bb3fc7c",
      'pName': 'gasgg',
      'pStart': '2017-02-20',
      'pEnd': '2017-02-28',
      'pClass': 'ggroupblack',
      'pLink': '',
      'pMile': 1,
      'pRes': 'WBS',
      'pComp': 100,
      'pGroup': 1,
      'pParent': "0",
      'pOpen': 1,
      'pDepend': '',
      'pCaption': '',
      'pCode': '',
      'pNotes': 'Some text'
    }];
    console.log(this.data);
    console.log(this.data1);
  }

[HassanEmam]

@mariohmol Would you be able to help please

[mariohmol]

Maybe put a variable before to just render when you get data?

like <div *ngIf="data"> <ng-gant> </div>