Org Chart not working for People pIcker

Question

Reference of plugin https://www.jqueryscript.net/demo/Fully-Customizable-Organisational-Chart-Plugin-With-jQuery-OrgChart/

I am using List schema as TeamMember(PeoplePicker),FunctionalManager(PeoplePicker),Department(SingleLinetext) and trying below code to create org chart in SharePoint

But it only create first node not the rest but however if create FunctionalManager as Lookup column it work but the requirement have with People picker can any one help where making mistake

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'/>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/orgchart/2.1.9/css/jquery.orgchart.min.css'/> 
<div id="chart-container"></div>
<script src='https://code.jquery.com/jquery-1.12.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/orgchart/2.1.9/js/jquery.orgchart.min.js'></script>
<script type="text/javascript">
function Employee (ID,Name,Manager,Designation) {
    this.ID = ID;
    this.Name= Name;
    this.Manager = Manager;
    this.Designation = Designation;
}
function GetOrgJSON(employeeList,manager){
    var note = '';
    var employeeProcessed=[];
    for(var i=0;i<employeeList.length;i++){
        var objEmp = employeeList[i];      
        if(objEmp.Manager == manager && employeeProcessed.indexOf(objEmp.Name) < 0 ){
            note += '{"name":"'+objEmp.Name+'",';
            note += '"title":"'+objEmp.Designation+'"';
            employeeProcessed.push(objEmp.Name);
            var empUl = GetOrgJSON(employeeList,objEmp.ID);
            if(empUl !=""){
                note +=',"children": [' + empUl + ']';
            }
            note +='},';
        }       
    } 
    return note;
}
(function($){
  $(function() {
    $.ajax({
        url: "https://XXXXXX.sharepoint.com/sites/XXXXXX/_api/web/lists(guid'627bae98-f8f4-437d-91c5-14ef8e10eef3')/items?$select=ID,TeamMember/ID,TeamMember/Title,FunctionalManager/ID,FunctionalManager/Title,Department&$expand=TeamMember/Id,FunctionalManager/Id",
        type: "GET",
        headers: {
            "Accept": "application/json;odata=verbose",
        },
        success: function (data) {
            if(data.d.results.length>0){
                var employeeList = [];
                $.each(data.d.results,function(i,employee){
                    var title = employee.TeamMember.Title;
                    var ID = employee.ID;
                    var manager = employee.FunctionalManager.ID!= undefined ? employee.FunctionalManager.ID:"0";
                    var designation=employee.Department;
                    var objEmp = new Employee(ID,title ,manager,designation);
                    employeeList.push(objEmp);
                });
                var datascource = GetOrgJSON(employeeList,"0").replace(/},]/g,"}]");
                datascource=datascource.slice(0, datascource.length-1);
                
                $('#chart-container').orgchart({
                  'data' : JSON.parse(datascource),
                  'nodeContent': 'title'
                }); 
            }
        },
        error: function (data) {
            //alert("Error");
        }
    });  
  });
})(jQuery);
</script>

Answer 1

i am able to resolve my code its small change in code below is the updated code

below is the change

var ID = employee.TeamMember.ID;

updated code

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'/>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/orgchart/2.1.9/css/jquery.orgchart.min.css'/> 
<div id="chart-container"></div>
<script src='https://code.jquery.com/jquery-1.12.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/orgchart/2.1.9/js/jquery.orgchart.min.js'></script>
<script type="text/javascript">
function Employee (ID,Name,Manager,Designation) {
    this.ID = ID;
    this.Name= Name;
    this.Manager = Manager;
    this.Designation = Designation;
}
function GetOrgJSON(employeeList,manager){
    var note = '';
    var employeeProcessed=[];
    for(var i=0;i<employeeList.length;i++){
        var objEmp = employeeList[i];      
        if(objEmp.Manager == manager && employeeProcessed.indexOf(objEmp.Name) < 0 ){
            note += '{"name":"'+objEmp.Name+'",';
            note += '"title":"'+objEmp.Designation+'"';
            employeeProcessed.push(objEmp.Name);
            var empUl = GetOrgJSON(employeeList,objEmp.ID);
            if(empUl !=""){
                note +=',"children": [' + empUl + ']';
            }
            note +='},';
        }       
    } 
    return note;
}
(function($){
  $(function() {
    $.ajax({
        url: "https://XXXXXX.sharepoint.com/sites/XXXXXX/_api/web/lists(guid'627bae98-f8f4-437d-91c5-14ef8e10eef3')/items?$select=ID,TeamMember/ID,TeamMember/Title,FunctionalManager/ID,FunctionalManager/Title,Department&$expand=TeamMember/Id,FunctionalManager/Id",
        type: "GET",
        headers: {
            "Accept": "application/json;odata=verbose",
        },
        success: function (data) {
            if(data.d.results.length>0){
                var employeeList = [];
                $.each(data.d.results,function(i,employee){
                    var title = employee.TeamMember.Title;
                    var ID = employee.TeamMember.ID;
                    var manager = employee.FunctionalManager.ID!= undefined ? employee.FunctionalManager.ID:"0";
                    var designation=employee.Department;
                    var objEmp = new Employee(ID,title ,manager,designation);
                    employeeList.push(objEmp);
                });
                var datascource = GetOrgJSON(employeeList,"0").replace(/},]/g,"}]");
                datascource=datascource.slice(0, datascource.length-1);
                
                $('#chart-container').orgchart({
                  'data' : JSON.parse(datascource),
                  'nodeContent': 'title'
                }); 
            }
        },
        error: function (data) {
            //alert("Error");
        }
    });  
  });
})(jQuery);
</script>