Generate dinamically a

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.

This is a pure JS solution: https://stackoverflow.com/questions/11128700/create-a-ul-and-fill-it-based-on-a-passed-array — AbsoluteBeginner, Oct 08 '20 at 07:45

54ka · Accepted Answer · 2020-10-16T10:22:00.340

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>

Thanks for the reply! It seems to work, but I'm having one little issues. If you add another item, to the array the folder icon is shown when it's a file (http://jsfiddle.net/xesyoq20). Can you give me a hand to fix this? Thank you!! BTW: I edited your code in order to add the folder icons `fa fa-file`). — Avión, Oct 16 '20 at 09:14
The issue still continues, please check the icon of the last item, `other_app_04.dat`, it's printed as a folder when it's a file: https://jsfiddle.net/svda9j4q/ — Avión, Oct 16 '20 at 09:38
And one last thing (sorry for bother so much!). If you have a tree with just folders, empty files are shown: https://jsfiddle.net/76wkombr/ — Avión, Oct 16 '20 at 09:43
Still the same issue :( Please, check `other_app_04.dat`: https://jsfiddle.net/rndghtpu/ — Avión, Oct 16 '20 at 10:13
Hello, 54ka, sorry for bother again. It seems that sometimes it fails. Please, check this set of data, it creates a strange folder titled `file`: https://jsfiddle.net/1htzfu38/ Can you please give me this last help? Thank you so much! — Avión, Oct 22 '20 at 09:40
Here's another example that fails: `var arrayOfFiles = ["/first_folder/","/first_folder/second_folder/","/first_folder/second_folder/asd/","/first_folder/third/"]`. Can you give me a hand, please? — Avión, Oct 22 '20 at 10:26

Generate dinamically a listing from a input array in jQuery

1 Answers1

Generate dinamically a

listing from a input array in jQuery