javascript - 使用 jQuery 或 javascript 在模板上显示文件树的方法是什么？

Question

我有一个这样的列表，服务器提供给模板：

test_data/reads_1.fq

test_data/reads_2.fq

test_data/test_ref.bt2

test_data/test_ref.ebwt

test_data/test_ref.fa

test_data/test_ref2.bt2

test_data/new_directory/ok.txt

我想在树视图中显示这些文件，如下所示：

test_data
   reads_1.fq
   reads_1.fq
   test_ref.bt2
   test_ref.ebwt
   test_ref.ebwt

   new_directory
       ok.txt

这样做的最好方法是什么？谢谢

编辑

我将这样的数据作为列表（Python）发送：

['test_data/reads1.fq', 'test_data/reads_2.fq', test_data/new_directory/ok.txt]

编辑2

   $(document).ready(function(){
            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('/');
              $('html').html('<ul><li>'+result[0]+'</li><ul><li>'+result[1]+'</li><ul><li>'+result[2]+'</li></ul></ul>');
            }
            });

结果

test_data
   test_ref.fa
       undefined

预期结果：

test_data
    reads_1.fq
    reads_2.fq

    new_directory
        ok.txt 

Answer 1

尝试这个：

    <script type="text/javascript">
    $(document).ready(function(){
    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);
                 }
});
</script>

这可能不是最佳做法，但你需要这样的东西。您也可以将您的字符串放入数组中以检查索引是否相同以避免重复。如果我有时间，我会好好研究一下。