jsTreeで取得した値がundefinedになるので、きちんと値が反映されるようにしたいです。

前提・実現したいこと

JSONからデータを取得して、jsTreeで表示しております。
jsTreeの公式ドキュメントに載っている以外のプロパティを扱いたいです。
ですが、現状ドキュメント以外のプロパティを使用するとundefinedが表示されています。
こちらにきちんと値が入るように修正したいです。

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

codeというプロパティ部分がundefinedになる。

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tree-api</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>  
    <div id="jstree"></div>
    <script type="text/javascript">
        let json = [];  
        $.jstree.defaults.core.themes.responsive = true;
        $(function() {
                let hostUrl = "http://localhost:3000/hits";
                $.ajax({
                    type: 'get',
                    url: hostUrl,
                    dataType : 'json'
                }).done(function(data){
                    json = data;
                    const tree = json.map((x) => {
                        if(x.parentGroupId == ""){
                            x.parentGroupId = "#";
                        }
                        console.log(x.itemCode);
                      //こちらでcodeというプロパティを持たせています
                      return {'id' : x.groupId.toString() , 'parent' :x.parentGroupId.toString(), 'text' : x.itemName.toString(), 'code' : x.itemCode.toString()  };
                    });            
                    $('#jstree').jstree({ 'core' : {
                        "check_callback" : false,
                        "themes" : { "stripes" : true, "icons": false, "responsive": false },
                        'data' : tree,
                    }
                });      
                
            }).fail(function(){
                alert('No data');
            });
            
        });
        
        $('#jstree').on('select_node.jstree', function(e, data) {
                console.log("selected is :  =" + data.node.id +"  "+ data.node.text+"  "+ data.node.code);
           });
           //$('#jstree').on("changed.jstree", function(e, data){
            //console.log("changed is : id =" + data.node.id +"  "+ data.node.text);
        //});
        </script>
</body>
</html>

試したこと

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

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

js
1$('#jstree').on('select_node.jstree', function(e, data) {
2    console.log("selected is :  =" + data.node.id +"  "+ data.node.text+"  "+ data.node.code);
3});

ここで、data.node.original.code にアクセスする必要があります。
ドキュメントに「(using the original property on each node)」と書いてありますし、console.dir(data.node) して中身を探ってみると見つけられたと思います。

投稿2021/04/08 01:16