Folder List through JQuery Ajax Call

Folder List through JQuery Ajax Call

I want to generate a list of folders on a page (through an ajax call) and then on click of any of this folders a sub list to be generated. Please help me with below code :

HTML 

  1. <div id="targetPath"></div> <div id="treeview-container">       <div id="tree"></div> </div>


JQuery

  1. generateTreefn('/');
    function generateTreefn(path){
    $.ajax({
    type: 'GET',
    dataType: 'json',
    url: '/bin/getFilepaths',
    data: {
    path: path
    },
    success: function(jsonArray) {
    var htmlValue="<ul>";
    jQuery.each(jsonArray, function(data,item) {
    htmlValue +="<li id="+item+">"+item+"</li>";
    });
    htmlValue=htmlValue+"</ul>";
    console.log(htmlValue); 
    $("#tree").replaceWith(htmlValue);
    }
    });
    }


    $('#treeview-container').on('click', function(event) {
    console.log('User clicked on foo.');
    // Need a logic to select the folder from generated list
    // so as i can call "generateTreefn" with selected value.

    });

    $('#treeview-container').on('dblclick', function(event) {
    var targetPath = $(this).attr("id");
    $("#targetPath").text(targetPath);
    });

/bin/getFilepaths : returns JSON response as below :

for parameter : '/' :


 [
"/ABC",
 "/DEF",
 "/GHI"
 ]

for parameter : '/ABC'

 [
 "/OPQ",
 "/RST",
 "/WXY"
]

so on...