jsTreeでJSONデータからTreeを表示しているのですが、ファイルしか表示されないのでファイル名も表示したいです。。

前提・実現したいこと

jsTreeでtreeを表示しているのですが、ファイルのみ表示されている状態です。
ファイルのみではなく、ファイル名も表示したいです。
ファイル名はJSONデータに格納しております。

イメージ説明

発生している問題・エラーメッセージ

ファイルのみ表示される。

該当のソースコード

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.2/themes/default/style.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.2/jstree.min.js"></script>
</head>
<body>
    <input id="search" type="button" value="検索" />
    <div id="jstree"></div>

    <script type="text/javascript">
        let data;
        $('#search').click(function() {
            let hostUrl = "http://localhost:3000/hits";
            $.ajax({
            type: 'get',
            url: hostUrl,
            dataType : 'json'
            }).done(function(data){
                console.log("success");
                $(function () {
                    $('#jstree').jstree({
                        'core': {
                            'data': { 
                                'url': hostUrl, // ajaxで読み込むjsonファイル
                                'dataType': 'json',
                                'data': function (node) {
                                    data= node.id;
                                    console.log(data);
                                    
                                    return { 'id': node.id };
                                }
                            }
                        }
                    })
                }
                );
                
            }).fail(function(){
                    alert('データが無いです');
                    $('#zip').val("");
            });
        });
        
        
        </script>
</body>
</html>

JSON
1{
2    "hits": [
3    {
4        "groupId": 1,
5        "parentGroupId": "",
6        "itemCode": "",
7        "itemName": "テスト1",
8        "sortOrder": 1
9    },
10    {
11        "groupId": 2,
12        "parentGroupId": "",
13        "itemCode": "",
14        "itemName": "テスト2",
15        "sortOrder": 2
16    },
17    {
18        "groupId": 3,
19        "parentGroupId": "",
20        "itemCode": "",
21        "itemName": "テスト3",
22        "sortOrder": 3
23    },
24    {
25        "groupId": 9,
26        "parentGroupId": "1",
27        "itemCode": "",
28        "itemName": "テスト1-1",
29        "sortOrder": 1
30    },
31    {
32        "groupId": 11,
33        "parentGroupId": "1",
34        "itemCode": "",
35        "itemName": "テスト1-2",
36        "sortOrder": 7
37    },
38    {
39        "groupId": 14,
40        "parentGroupId": "1",
41        "itemCode": "",
42        "itemName": "テスト1-3",
43        "sortOrder": 12
44    },
45    {
46        "groupId": 13,
47        "parentGroupId": "1",
48        "itemCode": "",
49        "itemName": "テスト1-4",
50        "sortOrder": 12
51    },
52    {
53        "groupId": 1029,
54        "parentGroupId": "9",
55        "itemCode": "10",
56        "itemName": "テスト結果10",
57        "sortOrder": 2
58    },
59    {
60        "groupId": 1026,
61        "parentGroupId": "9",
62        "itemCode": "20",
63        "itemName": "テスト結果20",
64        "sortOrder": 7
65    },
66    {
67        "groupId": 1031,
68        "parentGroupId": "9",
69        "itemCode": "30",
70        "itemName": "テスト結果30",
71        "sortOrder": 11
72    },
73    {
74        "groupId": 1076,
75        "parentGroupId": "9",
76        "itemCode": "",
77        "itemName": "テスト9-1",
78        "sortOrder": 18
79    }
80  ]
81}

試したこと

公式のドキュメントを読んだのですが、見つけることが出来ませんでした。。

補足情報（FW/ツールのバージョンなど）

OS:Mac

回答1件

ベストアンサー

hostUrl から返される JSON が質問文にある形式だとすると、それは jsTree が処理できる形式ではないので、JSON を加工してやる必要があります。data.hits の各要素を id parent text などを持ったオブジェクトにmap()して、それを 'core' 内の 'data' に指定してやれば良いでしょう。

投稿2021/04/07 15:19

int32_t

総合スコア17888

回答へのコメント

tanakamaro

2021/04/08 00:30

回答ありがとうございます！ JSONの形式ですが、公式ドキュメントに載っているのプロパティのみしか扱えないのでしょうか？例えば、id,parent,text,の他にcodeといったプロパティを指定したい場合はどのような方法がありますでしょうか？

int32_t

2021/04/08 00:37

ドキュメントに書いてありますね。"Keep in mind you will be able to access any additional properties you specify - jsTree won't touch them and you will be able to use them later on" jsTreeは無視しますが、codeというプロパティを足してもよいようです。

tanakamaro

2021/04/08 00:42

ありがとうございます！足してみたところ、コンソールではcodeの値がundefinedになります。これはjsTreeでは無視されているということでしょうか？また、undefinedではなく値を表示したい場合はどうすればよろしいでしょうか？

int32_t

2021/04/08 00:47

どういうコードでコンソールに表示したか不明なので、わかりません。名前の表示に成功したらこの質問は解決済として、codeについては別の質問にしてはいかがでしょうか。