How to show a list or array in a tree structure in javascript?

Question

I pass this list from python to javascript as follows:

var string=["test_data/new_directory/ok.txt","test_data/reads_1.fq","test_data/test_ref.fa"]; 

I need the output as follows:

 test_data reads_1.fq test_ref.fa new_directory ok.txt 

Or the output could be like this:

 test_data reads_1.fq test_ref.fa test_data/new_directory ok.txt 

I used the split function to get a list with each file and directory as follows:

 var string=["test_data/new_directory/ok.txt","test_data/reads_1.fq","test_data/test_ref.fa"]; for(var i=0;i<string.length;i++){ var result = string[i].split('/'); console.log(result); } 

The result is as follows:

 ["test_data", "new_directory", "ok.txt"] ["test_data", "reads_1.fq"] ["test_data", "test_ref.fa"] 

How to convert to the format I showed above? Thanks

Answer 1

This is certainly possible, but it requires recursion.

The first thing you want to do (as you already found out, actually) is divided into slashes. For simplicity, we will use map :

 paths = paths.map(function(path) { return path.split('/'); }); 

Now we want to convert this to an array of objects with the name and children properties. This means that we have to use recursion.

In this function, we will make the first pass, grouping them by their first element:

 var items = []; for(var i = 0, l = paths.length; i < l; i++) { var path = paths[i]; var name = path[0]; var rest = path.slice(1); var item = null; for(var j = 0, m = items.length; j < m; j++) { if(items[j].name === name) { item = items[j]; break; } } if(item === null) { item = {name: name, children: []}; items.push(item); } if(rest.length > 0) { item.children.push(rest); } } 

Then we can rewrite all of these (provided that the name of the function we selected was structurize ):

 for(i = 0, l = items.length; i < l; i++) { item = items[i]; item.children = structurize(item.children); } 

Now we have a good structure. Then we can strengthen it, again using a recursive function. Since the directory list is simply the name of each item, followed by a list of the contents of the subdirectories, we can easily write this:

 function stringify(items) { var lines = []; for(var i = 0, l = items.length; i < l; i++) { var item = items[i]; lines.push(item.name); var subLines = stringify(item.children); for(var j = 0, m = subLines.length; j < m; j++) { lines.push(" " + subLines[j]); } } return lines; } 

Then, to do this:

 console.log(stringify(structurize(paths)).join("\n")); 

Answer 2

Sorry for being late to the party. I ran into a similar problem trying to wrench a list of paths into a nested object. Here is a fiddle showing how I did it.

 var list = []; list.push("A/B/C"); list.push("A/B/D"); list.push("A/B/C"); list.push("B/D/E"); list.push("D/B/E"); list.push("A/D/C"); var data = []; for(var i = 0 ; i< list.length; i++) { buildTree(list[i].split('/'),data); } debugger; function buildTree(parts,treeNode) { if(parts.length === 0) { return; } for(var i = 0 ; i < treeNode.length; i++) { if(parts[0] == treeNode[i].text) { buildTree(parts.splice(1,parts.length),treeNode[i].children); return; } } var newNode = {'text': parts[0] ,'children':[]}; treeNode.push(newNode); buildTree(parts.splice(1,parts.length),newNode.children); } 

https://jsfiddle.net/z07q8omt/