JSTree: creating expandable tree structure with php and mysql

Question

I was trying to create an expandable tree structure using jstree with php and mysql in Codeigniter. I was referring this for doing the same. But I am unable to get the tree structure. The page is showing blank. I couldn't figure out the issue in my code.

Here is my code:

table structure

    CREATE TABLE `tab_family` (
      `family_id` int(11) NOT NULL,
      `family_name` varchar(250) NOT NULL,
      `parent_id` int(11) NOT NULL
    ) ENGINE=InnoDB DEFAULT CHARSET=latin1;

    --
    -- Dumping data for table `tab_family`
    --

    INSERT INTO `tab_family` (`family_id`, `family_name`, `parent_id`) VALUES
    (1, 'Pullippadavil', 0),
    (2, 'Theveril (II)', 1),
    (3, 'Valya Puthen Purayil (II)', 1),
    (4, 'Pullippadavil (II)', 1),
    (5, 'Ottavelil ( III )', 2),
    (6, 'Theveril - Oommen Kora ( III )', 2);

controller function

    public function getfamilytree()
    {
    $result = $this->Family_model->getFamilyTreeData();
    if(!empty($result))
    {
    foreach($result as $res)
    {
    $data[] = array(
    'id' => $res->family_id,
    'parent_id' => $res->family_id,
    'text' => $res->family_name,
    );
    }
    $itemsByReference = array();

    // Build array of item references:
    foreach($data as $key => &$item) {
    $itemsByReference[$item['id']] = &$item;
    // Children array:
    $itemsByReference[$item['id']]['children'] = array();
    // Empty data class (so that json_encode adds "data: {}" ) 
    $itemsByReference[$item['id']]['data'] = new StdClass();
    }

    // Set items as children of the relevant parent item.
    foreach($data as $key => &$item)
    if($item['parent_id'] && isset($itemsByReference[$item['parent_id']]))
    $itemsByReference [$item['parent_id']]['children'][] = &$item;

    // Remove items that were added to parents elsewhere:
    foreach($data as $key => &$item) {
    if($item['parent_id'] && isset($itemsByReference[$item['parent_id']]))
    unset($data[$key]);
    }

    // Encode:
    echo json_encode($data);
    }
    }

View

   <section class="content">
  <!-- Default box -->
  <div class="box">
    <div class="box-body">
            <div id="html" class="demo"></div>
    </div>
    <!-- /.box-body -->
  </div>
  <!-- /.box -->
  </section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
    <script>
    var url="<?php echo base_url();?>";
    $(document).ready(function () {
    $('#html').jstree({
    "state" : { "key" : "demo" },
    "check_callback" : true,
    'core' : {
    'data' : {
    "url" : url+"Applications/getfamilytree",
    "dataType" : "json" // needed only if you do not supply JSON headers
    }
    }
    });
    })
    </script>

Model:

public function getFamilyTreeData()
{
    $query = $this->db->get('tab_family');
    return $query->result();
}

Answer 1

the problem was, The parent id was not correct

 $data[] = array(
'id' => $res->family_id,
'parent_id' => $res->family_id, // this was the problem
'text' => $res->family_name,
);

changed to

$data[] = array(
 'id' => $res->family_id,
 'parent_id' => $res->parent_id,
 'text' => $res->family_name,
 );

Now the tree is showing up