How to generate an organisation chart based on level using PHP and Javascript?

Question

I need to create an organisation chart based on the level in database. Given below is the details in table :

<script>
var datasource = {
    'name': 'Lao Lao',
    'title': 'general manager',
    'children': [{
        'name': 'Bo Miao',
        'title': 'department manager'
    }, {
        'name': 'Su Miao',
        'title': 'department manager',
        'children': [{
            'name': 'Tie Hua',
            'title': 'senior engineer'
        }, {
            'name': 'Hei Hei',
            'title': 'senior engineer'
        }]
    }, {
        'name': 'Hong Miao',
        'title': 'department manager'
    }, {
        'name': 'Chun Miao',
        'title': 'department manager'
    }]
};

$('#chart-container').orgchart({
    'data': datasource,
    'depth': 2,
    'nodeContent': 'title'
});
</script>

I need to get database table values into datasource variable.

Answer 1

You need to reorder your table:

ordered=[];
function checkobj(obj,level){
  //loop trough children:
  obj.children.forEach(function(child){
    //check children (children is in a lower level)
    checkobj(child,level+1);
  });
  //add the object to the current level
  ordered[level]=ordered[level]||[];
  ordered[level].push(obj);
  }
  //start looping with your data at root
  checkobj(datasource,0);

Ordered now contains an array, representing each level:

ordered:[
 0:[{},{}]//level 0 people (Lao Lao)
 1:[{},{}]//level 1 the Miaos
 ...
  ];

So you can do:

 ordered[0]//all people of level 0