Generate a folder structure from an array of strings

Question

I have been trying different possibilities but I am unsure how I can achieve a proper <ul><li> structure for my scenario when using jQuery.

I am looping through the filesList array using forEach and appending <ul> which gives me the following result:

var filesList = ['Root/', 'Root/folder 1/', 'Root/folder 1/Subfolder 1/', 'Root/folder 1/Subfolder 1/textfile.txt', 'Root/folder 2/'];
var $a = $("#a");
$a.html("");
var $files = $("<ul>");
$a.append($files);
filesList.forEach(function(e) {
  $files.append($("<li>", {
    text: e
  }));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="a"></div>

I want to achieve a full folder type structure while looping through my filesList, as shown in the following screenshot:

Is it possible to achieve this using jQuery?

Do you have control of the input array? This would be trivial if you can change it to a more appropriate structure, such as an array of nested objects. — Rory McCrossan
– Rory McCrossan, Commented Aug 22, 2019 at 7:56
@CarstenLøvboAndersen - I am trying the following stackoverflow.com/questions/20578697/… @Rory Unfortunately I don't because I am using jszip plugin (stuk.github.io/jszip) to read a zip file — Ali
– Ali, Commented Aug 22, 2019 at 8:00

Ali · Accepted Answer · 2019-08-23 01:39:47Z

I ended up doing this in 3 steps

Split each array item by /
Create a structured JSON object from splited items arrary
Build HTML tree structure from JSON

Step 1: Split array items

var filesList = [{List Of String Path}];
var finalArray = [];
    filesList.forEach(e) {
          var arr = e.split('/');
          finalArray.push(arr);
         });

Step 2: Build JSON Tree Structure

var tree = makeATree(finalArray);

Where makeATree function (taken from stephanbogner/index.js ) is the following

function makeATree(paths) {
                var tree = [];
                for (var i = 0; i < paths.length; i++) {
                    var path = paths[i];
                    var currentLevel = tree;
                    for (var j = 0; j < path.length; j++) {
                        var part = path[j];

                        var existingPath = findWhere(currentLevel, 'text', part);

                        if (existingPath) {
                            currentLevel = existingPath.children;
                        } else {
                            var newPart = {
                                text: part,
                                children: [],
                            }

                            currentLevel.push(newPart);
                            currentLevel = newPart.children;
                        }
                    }
                }
                return tree;

                function findWhere(array, key, value) {
                    t = 0;
                    while (t < array.length && array[t][key] !== value) { t++; };

                    if (t < array.length) {
                        return array[t]
                    } else {
                        return false;
                    }
                }
            }

Step 3: Pretty easy, using the jstree render it

var str = JSON.stringify(tree, null, 4);
$('#DIV').jstree({
   'core': {
       'data': $.parseJSON(str)
       }
});

The results are pretty

Hope this helps someone, ask if you have any questions.

FYI I am using jszip to read paths in a zip file, so passing var filesList = [{List Of String Path}]; manually or have jszip pass it in JSZip.loadAsync(files[i])

Please feel free to suggest any better way

Collectives™ on Stack Overflow

Generate a folder structure from an array of strings

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related