Generate dinamically a <ul> <li> listing from a input array in jQuery

Question

My web app has the following tree view in order to show some files and files.

 ul { list-style-type: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" /> <ul id="myTreeSelector"> <li> <span class="caret folder-selector"><i class="fa fa-folder"></i> first_folder</span> <ul class="nested"> <li class="file"><i class="fa fa-file"></i> app1.dat</li> <li class="file"><i class="fa fa-file"></i> app2.dat</li> <li> <span class="caret folder-selector"><i class="fa fa-folder"></i> second_folder</span> <ul class="nested"> <li class="file"><i class="fa fa-file"></i> ret.dat</li> <li><span class="caret folder-selector"><i class="fa fa-folder"></i> third_folder</span></li> </ul> </li> </ul> </li> </ul>

This is just an static example, I want to create this folder dinamically from an input array using jQuery.

Following the example above (and adding one last element as new empty directory ), my input array is as follows:

arrayOfFiles= ["/first_folder/app1.dat","/first_folder/app2.dat","/first_folder/second_folder/ret.dat", "/first_folder/second_folder/third_folder"]

How can I, using jQuery, iterate that array and create the proper folder structure? This is my try so far, I know I can use appendTo to add content to the HTML, but it's so hard for me to manage the file-folder stuff.

general_ul = $("#myTreeSelector")
general_li = $('</li>').appendTo(general_ul);
arrayOfPaths.forEach( function(pathOrFile) {
    var li = $('<li/>')
        .html('<span class="caret folder-selector"><i class="fa fa-folder"></i> first_folder</span>')
        .appendTo(general_li);
});

Thanks in advance.

Answer 1

I reworked my project so that it is as close as possible to what you need. This is not jQuery but I hope this helps you!

JS / HTML / CSS

 var arrayOfFiles = [ "/first_folder/app_01.dat", "/first_folder/app_02.dat", "/first_folder/second_folder/ret_01.dat", "/first_folder/second_folder/ret_02.dat", "/first_folder/second_folder/third_folder", "/other_first_folder/other_app_01.dat", "/other_first_folder/other_app_02.dat", "/other_first_folder/other_sec_folder/other_app_03.dat", "/other_first_folder/other_sec_folder/other_app_04.dat", "/new_folder/new_other_folder/last_folder", ]; var wrap = document.getElementById("myTreeSelector"); var lines = "----"; var res = {}; function makeObj(obj) { var splme = obj.split('/').slice(1); var f = res; for (i = 0; i < splme.length; i++) { obName = { name: splme[i] }; f = f[splme[i]] = f[splme[i]] || obName; } } arrayOfFiles.map(makeObj); var tmp = []; function prsObj(x, y) { for (var k in x) { if (typeof x[k] === 'object' && x[k] !== null) { prsObj(x[k], y); } else if (x.hasOwnProperty(k)) { y(x[k]); } tmp.push(lines); } }; prsObj(res, function (ftmp) { tmp.push(ftmp); }); var redy = []; for (var i = 0; i < tmp.length - 1; i++) { if (tmp[i] !== lines) { redy.push(tmp[i]); } else if (tmp[i] === lines && tmp[i + 1] === lines) { redy.push("file"); i++; } else if (tmp[i] === lines && tmp[i + 1] !== lines) { redy.push("folder"); } else { } } redy.pop(); var text = ''; var x = 0; var y = 0; for (var i = 0; i < redy.length; i++) { if (y === 1) { var text = document.createTextNode(redy[i]); addThis(0); x = 0; y = 0; } else if (redy[i + 1] === "file" && redy[i + 2] === "file") { if (redy[i].indexOf(".") > -1) { var text = document.createTextNode(redy[i]); addThis(1); i = i + 2; x = 0; y = 1; } else { var text = document.createTextNode(redy[i]); addThis(2); i = i + 2; x = 0; y = 1; } } else if (redy[i + 1] === "folder" && i === 0) { var text = document.createTextNode(redy[i]); addThis(0); x++; y = 0; } else if (redy[i + 1] === "folder" && x >= 1 || redy[i + 1] === "folder") { var text = document.createTextNode(redy[i]); addThis(2); x++; y = 0; } else if (redy[i + 1] === "file") { if (redy[i] === '') { continue; } else if (redy[i].indexOf(".") > -1) { var text = document.createTextNode(redy[i]); addThis(1); y = 0; } else { var text = document.createTextNode(redy[i]); addThis(2); y = 0; } } else { } } function addThis(x) { if (x === 0) { var li = document.createElement("li"); var span = document.createElement("span"); span.setAttribute("class", "caret folder-selector"); var iel = document.createElement("i"); iel.setAttribute("class", "fa fa-folder"); var ul = document.createElement("ul"); ul.setAttribute("class", "nested"); span.appendChild(iel); span.appendChild(text); li.appendChild(span); wrap.appendChild(li); li.appendChild(ul); } if (x === 1) { var get = wrap.getElementsByClassName("nested"); var ul = get[get.length - 1]; var iel = document.createElement("i"); iel.setAttribute("class", "fa fa-file"); var li = document.createElement("li"); li.setAttribute("class", "file"); ul.appendChild(li); li.appendChild(iel); li.appendChild(text); } if (x === 2) { var get = wrap.getElementsByClassName("nested"); var ul = get[get.length - 1]; var li = document.createElement("li"); var span = document.createElement("span"); span.setAttribute("class", "caret folder-selector"); var iel = document.createElement("i"); iel.setAttribute("class", "fa fa-folder"); ul.appendChild(li); li.appendChild(span); span.appendChild(iel); span.appendChild(text); var get = wrap.querySelectorAll("li") var li = get[get.length - 1]; var ul = document.createElement("ul"); ul.setAttribute("class", "nested"); li.appendChild(ul); } }

 ul { list-style-type: none; } i { margin-right: 5px; }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" /> <ul id="myTreeSelector"> </ul>