Express.jsでjsTree(Ajax)がうまく表示されない

問題

外部サーバに置いてある、フォルダやファイルのURLを取得し、その情報からJSONファイルを作成して、Express.jsとjsTreeを使ってブラウザ上に、ファイルツリーを表示させたかったのですが、上の画像のように1つフォルダーが表示されたが、それ以降は表示されなかった。

使用環境

macOS -v 11.5.2
node.js -v 16.8.0
express -v 4.16.4
jstree -v 3.3.12**
jquery-3.6.0.min.js

ソースコード・JSONファイル

作成したJSONファイルの一部

json
1{
2  data: [
3    { id: '0', parent: '#', text: 'smartphones', selected: true },
4    {
5      id: '1',
6      parent: '#',
7      text: 'i-04gev8dqbxd9zf54imcv',
8      selected: true
9    },
10    ///省略
11    {
12      id: '685',
13      parent: '#',
14      text: 'file.lst',
15      selected: true,
16      icon: 'jstree-file'
17    }
18  ]
19}
20

（クライアント側）jQueryでJSONファイルを要求

js
1// jstreeを表示させる
2$(function () {
3    $('#file_tree').jstree();
4
5    // ページ読み込み後に実行
6    $(document).ready(function () {
7        redraw_tree();
8    });
9});
10
11function redraw_tree() {
12        $.ajax({
13        type: "get",
14        url: "http://localhost:8080/file",
15        dataType: "json",
16        success: function (data) {
17            // 通信成功時
18            $('#file_tree').jstree(true).settings.core.data = data;
19            $('#file_tree').jstree(true).refresh();
20        },
21        error: function () {
22            // 通信失敗時
23            alert("Server Error...");
24        },
25    });
26}

※直接ローカルからファイルを取得する方法が分からなかったので、Express.js側に要求させた

（サーバ側）JSONファイルを送信

js
1var express = require('express');
2var router = express.Router();
3
4const fs = require('fs'); 
5***JSONファイルを取得            
6const jsonObj = JSON.parse(fs.readFileSync("./public/javascripts/jstree.json", "utf8"));
7console.log(jsonObj);
8
9var data = {
10    title : "ファイルツリー",
11}; 
12/* GET home page. */
13router.get('/', function(req, res, next) {
14  res.render('index', data);
15});
16***目的のコード
17router.get('/file', function(req, res, next) {
18    console.log("JSONを返すよ")
19    res.json(jsonObj);
20}); 
21
22module.exports = router;

HTML(ejs)ファイル

ejs
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="UTF-8">
5    <title><%= title%></title>
6    <link rel="stylesheet" href="/stylesheets/style.min.css" />
7    <link rel="stylesheet" href="/stylesheets/style.css" />
8    <script src="/javascripts/jquery-3.6.0.min.js"></script>
9    <script src="/javascripts/jstree.min.js"></script>
10  </head>
11  <body>
12    <div id="content">
13      <div id="split_panel">
14        <div id="left_panel">
15          leftPanel
16          <div id="file_tree">
17          <!-- ここにデータを入れたい-->
18          </div>
19        <div id="right_panel">
20          rightPanel
21        </div>
22      </div>
23    </div>
24    <!--JSONファイルを要求するスクリプト-->
25    <script src="/javascripts/readTree.js"></script>
26  </body>
27</html>
28

色々と調べてみたのですが、解決方法がわかりませんでした

行動規範の内容に同意します

回答1件

自己解決

解決できました

そもそもJSONデータの作成に間違えがありました。

json
1{
2***__親のID__
3  id: 'i-04gev8dqbxd9zf54imcv',
4  parent: '#',
5  text: 'i-04gev8dqbxd9zf54imcv'
6}
7{
8  id: 'file.lst',
9***__ここを一致させる__
10  parent: 'i-04gev8dqbxd9zf54imcv',
11  text: 'file.lst',
12  icon: 'jstree-file'
13}

ファイルツリー構造にするためには、親の**"'id: 'something'"'と"parent: 'something'"**を一致する必要があった

コードの訂正

（サーバ側）JSONファイルの読み込み方に間違えがあった

js
1//間違いconst jsonObj = fs.readFileSync("./public/javascripts/jstree.json", 'utf8');
2**訂正
3const jsonObj = fs.readFileSync("./public/javascripts/jstree.json");
4const json = JSON.parse(jsonObj);
5***省略
6router.get('/file', function(req, res, next) {
7    console.log("JSONを返すよ")
8    //res.json(jsonObj);
9    res.json(json);
10});

（クライアント）jstreeの表示
下記のリンクを参考に色々と変更
javascript - JSTreeにAJAXで取得したJSONデータを入力する

js
1$(function() {
2    $(document).ready(function() {
3        $.ajax({
4            async : true,
5            type : "GET",
6            url : "http://localhost:3000/file",
7            dataType : "json",    
8
9            success : function(json) {
10                console.log(json);
11                try {
12                    JSON.parse(json);
13                } catch(e)  {
14                    console.log("JSONじゃないよ");
15                }
16                createJSTrees(json);
17            },    
18
19            error : function(xhr, ajaxOptions, thrownError) {
20                alert(xhr.status);
21                alert(thrownError);
22            }
23        });
24    });
25});    
26
27function createJSTrees(jsonData) {
28    $("#file_tree").jstree({
29        'core' : {
30            'data' : jsonData
31        },
32    });
33    $('#file_tree').on("changed.jstree", function (e, data) {
34        console.log(data.selected);
35    });
36}