app.js

(function() {
    var clientId = "";
    var apiKey = "";

    var aClient = new groupdocs.ApiClient(new groupdocs.GroupDocsSecurityHandler(apiKey));
    var api = new groupdocs.StorageApi(aClient, "https://dev-api.groupdocs.com/v2.0");

    var show_list = function (list, $target) {
        var folderList = '';
        var fileList = '';

        var length = list.folders.length;
        var element = null;
        for (var i = 0; i < length; i++) {
            element = list.folders[i];
            folderList += "<li class='directory collapsed'><a href='#' rel='" + element.name + "'>" + element.name + "</a></li>";
        }

        var length = list.files.length;
        var element = null;
        for (var i = 0; i < length; i++) {
            element = list.files[i];
            fileList += "<li class='file ext_" + element.file_type.toLowerCase() + "'><a class='iframe' href='' rel='" + element.guid + "'>" + element.name + "</a></li>";
        }

        $target.append('<ul class="fileTree" style="">' + folderList + fileList + '</ul>');

        bindEvents($target);
    };

    var bindEvents = function($target) {
        $target.find('li a').bind('click', function(){
            if( $(this).parent().hasClass('directory') ) {
                if( $(this).parent().hasClass('collapsed') ) {
                    // Expand
                    $(this).parent().find('ul').remove(); // cleanup

                    getStructure( $(this).parent(), $(this).attr('rel') );
                    $(this).parent().removeClass('collapsed').addClass('expanded');
                } else {
                    // Collapse
                    $(this).parent().find('ul').slideUp(500);
                    $(this).parent().removeClass('expanded').addClass('collapsed');
                }
            } else {
                console.log($(this).attr('rel'));
            }
            return false;
        })
    }

    var getStructure = function (target, path) {
        path = path || "";
        api.ListEntities(function(response, status, jqXHR) {
            //console.log("success callback " + status);
            //console.log(response.result);
            if(response.result) {
                show_list(response.result, target);
            }
        }, clientId, path);
    }

    var init = function () {
        var $target = $('#filestructure');
        getStructure($target);
    }

    $(function() {
        init();
    } );

}());