如何在javascript中將列表或數組顯示到樹結構中？

Question

我將此列表從python傳遞給javascript，如下所示：

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

我想要這樣的輸出：

test_data
  reads_1.fq
  test_ref.fa
  new_directory
    ok.txt

或者輸出可能是這樣的：

test_data
 reads_1.fq
 test_ref.fa

test_data/new_directory
  ok.txt

我使用split函數來獲取每個文件和目錄的列表，如下所示：

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);


                                     }

輸出如下：

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

我怎樣才能轉換成上面顯示的格式？ 謝謝

Answer 1

抱歉遲到了。 我遇到了類似的問題，試圖將路徑列表分解為嵌套對象。 這是一個小提琴，展示了我最終如何做到這一點。

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/

Answer 2

這當然是可能的，但它需要遞歸。

你要做的第一件事（事實上，你已經想到要做的事情）就是在斜線上分開。 為簡單起見，我們將使用map ：

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

現在我們要將它轉換為具有name和children屬性的對象數組。 這意味着我們必須使用遞歸。

在這個函數中，我們將通過第一個元素對它們進行第一次分組：

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);
    }
}

然后我們可以遞歸所有這些（假設我們選擇的函數名是structurize ）：

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

現在我們有一個很好的結構。 然后我們可以使用遞歸函數對其進行字符串化。 由於目錄列表只是每個項目名稱后跟縮進目錄內容列表，我們可以相當容易地寫出：

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;
}

然后，實際做到這一點：

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