Generate a jstree using json response zend php

Question

In the model:

public function groups($getGroupId) {
        $cols = array('group_id','name');
        $sql = $this->select ()
                    ->from ( $this->_name, $cols )
                    ->where ( 'parent_id=?', $getGroupId );
        $groupDetails = $this->fetchAll ( $sql );
        //$childGroupName = $groupDetails['name'];
        return $groupDetails->toArray();
    }

groupDetails.php page:

$dbGroup = new dbGroups();
$groupDetails = $dbGroup -> groups($getGroupId);
$jsonResponse = json_encode($groupDetails);

When printing the jsonResonse (print_r($jsonResponse)). I'm getting response like this

[{"group_id":"2","name":"ABCD"},{"group_id":"7","name":"XYZ"}]  

how to generate a jstree using json response

By jstree demo i written a code like this for getting tree structure but i am unable to get a tree. Please help me

jQuery(document).ready(function(){
//alert("get tree view");
jQuery("#treeView").jstree({
   // This example uses JSON as it is most common
"json_data" : { 
    // This tree is ajax enabled - as this is most common, and maybe a bit more complex
    // All the options are almost the same as jQuery's AJAX (read the docs)
    "ajax" : {
        // the URL to fetch the data
        "url" : "groupDetails.php",
        // the `data` function is executed in the instance's scope
        // the parameter is the node being loaded 
        // (may be -1, 0, or undefined when loading the root nodes)
        "data" : function (n) { 
            // the result is fed to the AJAX request `data` option
            return { 
                "operation" : "get_children", 
                "id" : n.attr ? n.attr("id").replace("node_","") : 1 
            }; 
        }
    }
},

    "ui" : {
        "select_limit" : 1
    },
    "themes" : {
        "theme" : "default",
        "dots" : true,
        "icons" : true
    },

"types" : {
    // I set both options to -2, as I do not need depth and children count checking
    // Those two checks may slow jstree a lot, so use only when needed
    "max_depth" : -2,
    "max_children" : -2,
    // I want only `drive` nodes to be root nodes 
    // This will prevent moving or creating any other type as a root node
    "valid_children" : [ "drive" ],
    "types" : {
        // The default type
        "default" : {
            // I want this type to have no children (so only leaf nodes)
            // In my case - those are files
            "valid_children" : "none",
            // If we specify an icon for the default type it WILL OVERRIDE the theme icons
            "icon" : {
                "image" : "./file.png"
            }
        },
        // The `folder` type
        "folder" : {
            // can have files and other folders inside of it, but NOT `drive` nodes
            "valid_children" : [ "default", "folder" ],
            "icon" : {
                "image" : "./folder.png"
            }
        },
        // The `drive` nodes 
        "drive" : {
            // can have files and folders inside, but NOT other `drive` nodes
            "valid_children" : [ "default", "folder" ],
            "icon" : {
                "image" : "./root.png"
            },
            // those prevent the functions with the same name to be used on `drive` nodes
            // internally the `before` event is used
            "start_drag" : false,
            "move_node" : false,
            "delete_node" : false,
            "remove" : false
        }
    }
},

    "plugins" : ["themes","json_data","ui","crrm","cookies","dnd","search","types","hotkeys","contextmenu" ]
})
});

Answer 1

Your json should look like this:

[
   {
      "data" : {
         "icon" : <optional>,
         "title" : <node name>
      },
      "attr" : {
         "rel" : <the type you defined in the js (maybe "group")>,
         "title" : <node title>,
         "id" : <the node's id / group id>
      },
      "state" : "closed"
   }
]

You can put anything you want at the "attr" hash, basically it can hold other information you might need.