如何在 React/Javascript 中遞歸過濾樹 JSON？

Question

我需要過濾此 JSON 樹數據以實現搜索（過濾樹）功能。 結構如下所示：

Array filter > map 只會進入第一級。 我如何遍歷到子級的最后一級（過濾器應該在客戶之后的所有級別上工作）並使用字符串進行相應的過濾（包括邏輯）

{
   "path":"Customers",
   "sha":"Customers",
   "lazy":false,
   "type":"tree",
   "tree":[
      {
         "path":"Bob Rivers",
         "type":"tree",
         "sha":"Bob Rivers",
         "lazy":false,
         "tree":[
            {
               "path":"Services",
               "type":"tree",
               "sha":"Services",
               "lazy":true,
               "url":"http://localhost:3000/services",
               "tree":[
                  {
                     "path":"Service_X",
                     "type":"tree",
                     "sha":"Service_X",
                     "lazy":true,
                     "url":"http://localhost:3000/Service_X",
                     "tree":[
                        {
                           "lazy":true,
                           "path":"Service_X_child",
                           "mode":"040000",
                           "type":"tree",
                           "sha":"Service_X_child",
                           "url":"http://localhost:3000/Service_X_child",
                           "tree":[
                              {
                                 "lazy":true,
                                 "path":"ABC",
                                 "mode":"040000",
                                 "type":"blob",
                                 "sha":"ABC",
                                 "url":""
                              },
                              {
                                 "lazy":true,
                                 "path":"DEF",
                                 "mode":"040000",
                                 "type":"blob",
                                 "sha":"DEF",
                                 "url":""
                              }
                           ]
                        },
                        {
                           "lazy":true,
                           "path":"Service_X_child_2",
                           "mode":"040000",
                           "type":"tree",
                           "sha":"Service_X_child_2",
                           "url":"http://localhost:3000/Service_X_child_2"
                        }
                     ]
                  },
                  {
                     "path":"Service_Y",
                     "type":"tree",
                     "sha":"Service_Y",
                     "lazy":true,
                     "url":"http://localhost:3000/Service_Y"
                  }
               ],
            }
         ],
      }
   ],
}

示例輸入是如果搜索過濾器 = "DEF"（路徑將被檢查），數據將減少到這個

{
   "path":"Customers",
   "sha":"Customers",
   "lazy":false,
   "type":"tree",
   "tree":[
      {
         "path":"Bob Rivers",
         "type":"tree",
         "sha":"Bob Rivers",
         "lazy":false,
         "tree":[
            {
               "path":"Services",
               "type":"tree",
               "sha":"Services",
               "lazy":true,
               "url":"http://localhost:3000/services",
               "tree":[
                  {
                     "path":"Service_X",
                     "type":"tree",
                     "sha":"Service_X",
                     "lazy":true,
                     "url":"http://localhost:3000/Service_X",
                     "tree":[
                        {
                           "lazy":true,
                           "path":"Service_X_child",
                           "mode":"040000",
                           "type":"tree",
                           "sha":"Service_X_child",
                           "url":"http://localhost:3000/Service_X_child",
                           "tree":[
                              {
                                 "lazy":true,
                                 "path":"DEF",
                                 "mode":"040000",
                                 "type":"blob",
                                 "sha":"DEF",
                                 "url":""
                              }
                           ]
                        }
                     ]
                  }
               ],
            }
         ],
      }
   ],
}

我嘗試了以下解決方案但沒有奏效： 遞歸過濾搜索欄的 json 數據

這個人明確提到將 JSON 樹數據扁平化到數組並沒有解決他的問題

https://www.geeksforgeeks.org/how-to-filter-object-array-based-on-attributes/

Answer 1

  const TreeNode = ({node , searchString}) => {
    if(!node.tree){
      return node.path.toLowerCase().includes(searchString.toLowerCase())? node:null
    }

    node.tree = node.tree.map(childNode => TreeNode(
      {
        node:childNode, searchString        
      }
    )).filter(n => n);
    return node.tree.length? node:null;
  }
 

這個遞歸 function 解決了我的問題