Display the folder structure in bootstrap or HTML Page if I give the folders path defined

Question

I am reading folder paths from a file or by querying a database and the output will be as follows:

Consider below A as the parent folder and the remaining are the child folders of it.

A\A1\A2\A3
A\B\B1\B2
A\B\B4\B5\B5
A\C\C1\C2

I want to display the folder structure in a web page by reading the paths.

Is there any JavaScript or jquery or any function which will automatically sort and display in a structural way?

I am using CGI script (Perl & HTML) to display the structure. So the idea to sort and display using Perl will also be a solution.

that is the actual output of your database query? A list of strings like “A\C\C1\C2”? — Daniel Beck, Apr 28 '18 at 16:33
Yes Daniel. The output will be like this what I posted earlier. "A" is the parent folder and others all are sub folders. To be more specific I am trying to replicate HPQC test lab folder structure in my web page. So I am querying HPQC database for test lab folder structure with a sql query and the query returns in this format. For each folder it returns the path like this From Root to End divided by "\". — Surajit Mitra, Apr 28 '18 at 17:06

score 2 · Accepted Answer · answered Apr 28 '18 at 19:45

Here are two functions:

convert() will transform your input strings into an object representing the folder structure (the object key names represent the folder names; nested folders will be child objects.) (Note that \ is an escape character in javascript; if you want to use it as a delimiter you'll need to escape that character (\\) as I've done here; or it may be more convenient to use a forward slash instead. I've started with your input already converted into an array of paths -- if necessary you may need to split your input on newlines to get to that point.)

drawFolders() takes that object and draws it into the DOM as a set of nested lists. This is as bare-bones a display as possible, but should be enough as a starting point for more elaborate display options.

// Converts your input data into an object:
var convert = function(input) {
  var output = {};
  // iterate through each path in the input array:
  input.forEach(function(path) {
    var folders = path.split("\\"); // convert this path into an array of folder names
    // "parent" serves as a marker in the output object pointing to the current folder
    var parent = output; // the topmost folder will be a child of the output root
    folders.forEach(function(f) {
      parent[f] = parent[f] || {}; // add a folder object if there isn't one already
      parent = parent[f]; // the next part of the path will be a child of this part
    });
  });
  return (output);
}

// Draws nested lists for the folder structure
var drawFolders = function(input) {
  var output = "<ul>";
  Object.keys(input).forEach(function(k) { 
    output += "<li>" + k; // draw this folder
    if (Object.keys(input[k]).length) {
      output += drawFolders(input[k]); // recurse for child folders
    }
    output += "</li>";
  });
  output += "</ul>";
  return output;
}

var input = [
  "A\\A1\\A2\\A3",
  "A\\B\\B1\\B2",
  "A\\B\\B4\\B5\\B5",
  "A\\C\\C1\\C2"
];
document.getElementById("output").innerHTML = drawFolders(convert(input));

<div id="output"></div>

Thanks a lot for answering my question. This works great. If you can give me the idea how to toggle this UL and LI based on the user click that would be great. Because after opening the webpage the whole list already expanded. — Surajit Mitra, Apr 29 '18 at 12:39
There are a number of different ways to do that; here's one: https://stackoverflow.com/questions/31508500/dead-simple-collapsable-list-function-for-deep-and-shallow-nested-ul-li-lists-j — Daniel Beck, Apr 29 '18 at 13:12

Display the folder structure in bootstrap or HTML Page if I give the folders path defined

1 Answers1