[JS,jQuery]ajax通信でJSONを取得しているのですが、条件に合うJSONのみを取得する場合どうすればよろしいでしょうか？

前提・実現したいこと

ajax通信でJSONを受け取りjsTreeで表示しています。
jsTreeの項目選択時に再度通信を行い、選択したIDから子階層を取ってきたいですが、全JSONを取得する方法しかわかりません。

prentIdという項目に親のIDを持たせております。

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

選択した項目のIDから子階層となるJSONを取ってきたいが方法がわからない。。

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tree</title>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.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>
    <script src="../jRange/jquery.range.js"></script>
    <link rel="stylesheet" href="../jRange/jquery.range.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.8/jquery.slimscroll.min.js"></script>
    <style>
        main{
            display: flex;
        }

            .google-visualization-controls-rangefilter .google-visualization-controls-label{
              display: none;
            }
            .google-visualization-controls-slider-horizontal{
              width: 300px !important;
            }
            .goog-inline-block {
              top: -1px;
            }
            .google-visualization-controls-rangefilter-thumblabel{
              position: relative;
              top: 17px;
            }
            .theme-green .back-bar .pointer {
              width: 18px;
              height: 18px;
              border-radius: 3px;
              -moz-border-radius: 3px;
              background-color: #6391de;
              border: 1px solid #426dc9;
              position: absolute;
              top: -3px;
            }
        
            .theme-green .back-bar .pointer {
        
              background-image: -moz-linear-gradient(top, #6391de, #426dc9);
              background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#6391de), to(#426dc9));
              background-image: -webkit-linear-gradient(top, #6391de, #426dc9);
              background-image: -o-linear-gradient(top, #6391de, #426dc9);
              background-image: linear-gradient(to bottom, #6391de, #426dc9);
              filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6391de', endColorstr='#426dc9', GradientType=0);
            }
        
            .theme-green .back-bar {
              border: 1px solid #6a7eac;
              background-color: #fff;
              width: 300px;
              height: 10px;
              border-radius: 3px;
              -moz-border-radius: 3px;
              position: relative;
              display: inline-block;
            }
        
            .selected-bar {
              opacity: 0.3;
              border-radius: 2px;
              background-color: #6a7eac !important;
              background-image: -moz-linear-gradient(top, #6a7eac, #6a7eac) !important;
              background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#6a7eac), to(#6a7eac)) !important;
              background-image: -webkit-linear-gradient(top, #6a7eac, #6a7eac) !important;
              background-image: -o-linear-gradient(top, #6a7eac, #6a7eac) !important;
              background-image: linear-gradient(to bottom, #6a7eac, #6a7eac) !important;
              background-repeat: repeat-x;
              filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6a7eac', endColorstr='#6a7eac', GradientType=0);
            }
        
            .google-visualization-controls-rangefilter-thumblabel {
        
              font-weight: normal !important;
              font-size: 9px;
              color: #999 !important;
            }
           
    </style>
</head>
<body> 
    <main>
        <div id="wrapper">
            <div id="jstree"></div>
        </div>
        
        </main> 
    <script type="text/javascript">
        //階層変数
        let json = [];  
        $.jstree.defaults.core.themes.responsive = true;
        // GoogleChart変数、Loadパッケージ
        

        //階層構造生成
        $(function() {
            let hostUrl = "http://localhost:3000/hits";
            $.ajax({
                type: 'get',
                url: hostUrl,
                dataType : 'json'
            }).done(function(data){
                json = data;
                //mapとfileterを後ほど合体
                const arr = json.filter(function(value){
                    return value.parentGroupId == "";
                  });
                const tree = arr.map((x) => {
                    if(x.parentGroupId == ""){
                        x.parentGroupId = "#";
                    }
                  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("node_id: " , data,'original',data.node.original); 
        
            
           //ここで処理を行いたい。。
       });
       


        //階層Y軸スクロール
        $('#jstree').slimScroll({
            height: '300px'
        });
  </script>
</body>
</html>

試したこと

以下のように生成処理を書いたりしたのですが、全JSONを取ってきてしまいます。。

//階層構造ノード選択時処理
    $('#jstree').on('select_node.jstree', function(e, data) {
        console.log("node_id: " , data,'original',data.node.original); 
        
          //階層構造生成
        $(function() {
            let hostUrl = "http://localhost:3000/hits";
            $.ajax({
                type: 'get',
                url: hostUrl,
                dataType : 'json'
            }).done(function(data){
                json = data;
                //mapとfileterを後ほど合体
                const arr = json.filter(function(value){
                    return value.parentGroupId == "";
                  });
                const tree = arr.map((x) => {
                    if(x.parentGroupId == ""){
                        x.parentGroupId = "#";
                    }
                  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');
        });
        
    });  
       });

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

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

m.ts10806

2021/04/13 01:15

/hits のレスポンス時点で絞ったデータを返せば良いのでは？どのような構成になっているのでしょうか

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

回答1件

ベストアンサー

jQuery.ajax() | jQuery API Documentation

javascript
1          //階層構造生成
2        $(function() {
3            let hostUrl = "http://localhost:3000/hits";
4            $.ajax({
5                type: 'get',
6                url: hostUrl,
7                data: {
8                    parentId: xxxxxxx,
9                },
10                dataType : 'json'
11            }).done(function(data){