ツリービューを作りたいときにどのようなデータの持ち方をすればよいかわからない

Question

前提・実現したいこと

Javaでサーバーからファイルのリストを取得してThymeleafを使ってツリービューを表示したいと思っています。
サーバー側は
/home/testとディレクトリがあり、その下に/XXX(ID)/yyyyMMdd(日付)/〇〇.txt
といった感じでファイルがあります。
例えば取得したファイルのリストがList<String>で

/home/test/001/20200101/aaa.txt
/home/test/001/20200101/bbb.txt
/home/test/001/20200301/ccc.txt
/home/test/002/20200101/ddd.txt
/home/test/002/20200101/eee.txt

の5ファイルだった場合についての質問です。

ツリービューの表示の仕方は調べたところツリービューの表示

<ul id="myUL">
  <li><span class="caret">Beverages</span>
    <ul class="nested">
      <li>Water</li>
      <li>Coffee</li>
      <li><span class="caret">Tea</span>
        <ul class="nested">
          <li>Black Tea</li>
          <li>White Tea</li>
          <li><span class="caret">Green Tea</span>
            <ul class="nested">
              <li>Sencha</li>
              <li>Gyokuro</li>
              <li>Matcha</li>
              <li>Pi Lo Chun</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

のようにnestedを使えばできるのかなーと思ったのですが
この時日付とファイル名の紐づけと言いますか、どのようにaaa.txtとbbb.txtが20200101のnestedに入っているかというのを扱えばいいかがわかりませんでした。

最終的にはThymeleafのeachを使って繰り返しの処理でこのツリービューを作りたいと思っているのですが
今のままList<String>に/home/test/001/20200101/aaa.txtといったファイルパスが入っているだけだとすごくやりにくい気がしたのですが
これらのファイルリストのデータはどういった形で使うと扱いやすいのでしょうか？
抽象的な質問ですみません。

Answer 1

たとえば、次のようなツリービューを作りたいということですよね。

- 001
    - 20200101
        - aaa.txt
        - bbb.txt
    - 20200301
        - ccc.txt
- 002
    - 20200101
        - ddd.txt
        - eee.txt
```

まず、ツリーのノードを表すクラスを定義します。

```Java
public class TreeNode {
    private String name;
    private TreeNode[] children;

    public TreeNode(String name) {
        this.name = name;
    }

    public TreeNode(String name, TreeNode[] children) {
        this.name = name;
        this.children = children;
    }

    public String getName() {
        return name;
    }

    public TreeNode[] getChildren() {
        return children;
    }
}
```

それを使って実際のデータを用意します。

```Java
        TreeNode[] nodes = {
                new TreeNode("001", new TreeNode[] {
                        new TreeNode("20200101", new TreeNode[] {
                                new TreeNode("aaa.txt"),
                                new TreeNode("bbb.txt")
                        }),
                        new TreeNode("20200301", new TreeNode[] {
                                new TreeNode("ccc.txt")
                        })
                }),
                new TreeNode("002", new TreeNode[] {
                        new TreeNode("20200101", new TreeNode[] {
                                new TreeNode("ddd.txt"),
                                new TreeNode("eee.txt")
                        })
                })
        };
```

あとは Thymeleaf でこんな感じでしょうか。

```HTML
<ul id="myUL">
    <li th:each="node : ${nodes}">
        <span class="caret" th:text="${node.name}"></span>
        <ul class="nested" th:if="${node.children}">
            <li th:each="subnode : ${node.children}">
                <span class="caret" th:text="${subnode.name}"></span>
                <ul class="nested" th:if="${subnode.children}">
                    <li th:each="leaf : ${subnode.children}">
                        <span class="caret" th:text="${leaf.name}"></span>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
```

Comments

[moshi]

ご回答ありがとうございました！
まさにやりたいことができてすごく助かりました。

Thymeleafの知識が浅いのでもしお時間があれば教えていただきたいのですが
これらのツリービューはJavascriptを使用したときのように動的な(親のノードをクリックすると子が現れるのような)形にもできるものなのでしょうか？

[hoshi-takanori]

Thymeleaf はサーバー用のテンプレートエンジンなので、JavaScript から見たら単なる HTML に見えます。回答文のコードは質問文の HTML と同様になるはずなので、同じようにツリービュー化されるはずです。