To connect to the MySql database and display the data to the client, you will require a server-side language.

Here is a simple example:

Using PHP (getJSON.php)

$db = new mysqli('localhost', 'user', 'pass', 'demo');

$strSQL = mysqli_query("SELECT ...");
$result = $db->query($sql)
$rows = array();
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
         $rows[] = $row;
    }
}

$db->close()
print json_encode($rows);

For Javascript/jQuery:

$.ajax({
   url: 'http://{your-host}/getJSON.php',
   dataType: 'JSON',

   success: function(data, status) {
        console.log(data)
   },
   error: function(e) {
       console.log(e.statusText + " : " + e.responseText);
   }
});

This code has not been tested, but it should work as described :)

https://i.sstatic.net/fc2MA.jpg

I find obtaining tree objects in Java to be quite challenging. I attempted it myself and found another approach. By clicking on a folder, you can access the files or subfolders within. In this case, I utilized the Dropbox API for this purpose. Feel free to gather inspiration from it and explore your own ideas.

treeview.html:

<!-- Nested list template -->
              <script type="text/ng-template" id="items_renderer.html">
                <div ui-tree-handle>
                <span ng-show="item.file" class="glyphicon glyphicon-folder-close"></span>
                  <a ng-hide="item.file" class="btn btn-success btn-xs" data-nodrag ng-click="toggle(this);toggleMe(this)">
                  <span class="glyphicon glyphicon-folder-close" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}">
                  </span></a>
                  {{item.title}}
                  <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="remove(this)"><span class="glyphicon glyphicon-remove"></span></a>
                  <a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="newSubItem(this)" style="margin-right: 8px;"><span class="glyphicon glyphicon-plus"></span></a>
                </div>
                <ol ui-tree-nodes="options" ng-model="item.items" ng-class="{hidden: collapsed}">
                  <li ng-repeat="item in item.items" collapsed="true" ui-tree-node ng-include="'items_renderer.html'">
                  </li>
                </ol>
              </script>

              <div ui-tree="options">
                <ol ui-tree-nodes ng-model="list" >
                  <li ng-repeat="item in list track by $index"  ui-tree-node collapsed="true" ng-include="'items_renderer.html'"></li>
                </ol>
              </div>

            </div>

          </div>

        </div>

      </div>
    </div>

treecontroller.js:

app.controller('treeController',['$scope', '$http','fileUpload', function($scope, $http,fileUpload) {

    console.log("$$$ tree controller has been initialized $$$")

    /** To get list of files from the Dropbox */
    var files = [];
    $scope.list = [];
    var foldername = '';
    /***  Call the Dropbox cloud to retrieve files and folders for initialization*/

    $scope.getListOfFiles = function() {
        var foldername = "/";
        $http.get("http://localhost:8080/dropbox_api_.10/dropbox/getListOfFiles/?folderPath=" + foldername)
        .success(function(data, status) {
            console.log("List of files from Dropbox folder:", angular.toJson(data));
            $scope.list = data;
        }).error(function(data, status, headers, config) {
            alert('Error');
        });
    }

    var folders = [];
    var buildFolderPath = function(scope) {
        if (scope.$parentNodeScope != null) {
            folders.push(scope.$parentNodeScope.$modelValue.title);
            buildFolderPath(scope.$parentNodeScope);
        }
    };

    /** Expand tree upon click, collapse when needed*/
    $scope.toggleMe = function(scope) {
        folders = [];
        foldername="";
        if (!scope.collapsed) {
            var nodeData = scope.$modelValue;
            folders.push(nodeData.title);
            buildFolderPath(scope);
            console.log(angular.toJson(folders));

            for (var i = folders.length - 1; i >= 0; i--) {
                foldername += "/" + folders[i];
            }

            $http.get("http://localhost:8080/dropbox_api_.10/dropbox/getListOfFiles/?folderPath=" + foldername)
            .success(function(data, status) {
                console.log("Selected path:", foldername);
                console.log("List of files from Dropbox folder:", angular.toJson(data));
                for (var i = 0; i < data.length; i++) {
                    nodeData.items.push(data[i]);
                }
            }).error(function(data, status, headers, config) {
                alert('Error');
            });
        }
        else{
            var nodeData = scope.$modelValue;
            nodeData.items = [];

        }
    };



    $scope.getListOfFiles();
    /*****************/

    $scope.remove = function(scope) {
        scope.remove();
    };

    $scope.toggle = function(scope) {
        scope.toggle();
    };

    $scope.newSubItem = function(scope) {
        var nodeData = scope.$modelValue;
        nodeData.items.push({
            id : nodeData.id * 10 + nodeData.items.length,
            title : nodeData.title + '.' + (nodeData.items.length + 1),
            items : []
    });
    };
}]);

java:

public ArrayList<String> listDropboxFolders(@RequestParam("folderPath") String folderPath) throws DbxException {

        ArrayList<String> fileList=new ArrayList<String>();
        for (DbxEntry child : listing.children) {
            //File child;
            if(child.isFolder()){
                fileList.add(child.name);
                System.out.println("File is present: "+child.name);
            }else{
                System.out.println("File name: "+child.name);
            }
            child.toString());
        }
        return fileList;    
    }