以樹結構搜索JSON數據

Question

我正在用搜索選項在樹結構中構建動態菜單。

JSON數據看起來象下面這樣：

directories = [ 
      { 
       name: 'parent1', 
       child: [{ 
        name: 'child1', 
        child: [{ 
         name: 'child2', 
         child: [] 
        }] 
       }, 
       { 
        name: 'child2', 
        child: [] 
       }] 
      }, 
      { 
       name: 'parent2', 
       child: [{ 
        name: 'child1', 
        child: [] 
       }] 
      }, 
      { 
       name: 'parent2', 
       child: [{ 
        name: 'child1', 
        child: [] 
       }, 
       { 
        name: 'child2', 
        child: [] 
       }] 
      } 
     ]; 
    } 

下面的代碼來搜索父節點級別的項目：

searchFilter(search: string) { 
     console.log(search); 
     this.filteredArray = this.directories.filter(item => { 
      if (item.name.toString().toLowerCase().startsWith(search.toLowerCase())) { 
       return true; 
      } 
      return false; 
     } 
     ); 
     console.log(this.filteredArray); 
    } 

我打電話上方keyup事件代碼，並將其返回的搜索結果父節點級別。

現在我想搜索直到第n個孩子。任何幫助？

Answer 1

你需要一個遞歸實現你的過濾器，是這樣的：

function searchFilter(search: string, directories: any[]) { 
    for(let directory of directories){ 
     if(directory.name.toLowerCase().startsWith(search)){ 
      return directory; 
     } 
     if (directory.child !== undefined && directory.child.length > 0) { 
      let childsearch = searchFilter(search, directory.child) 
      if (childsearch !== undefined) { 
       return childsearch 
      } 
     } 
    } 
    return undefined; 
} 

see on typescript playground

另一種方法是可以將所有匹配的項目你的陣列（行爲像一個第n個深度過濾器）在返回：

function searchFilter(search: string, directories: any[], results = []) { 
    for(let directory of directories){ 
     if(directory.name.toLowerCase().startsWith(search)){ 
      results.push(directory); 
     } 
     if (directory.child !== undefined && directory.child.length > 0) { 
      let childsearch = searchFilter(search, directory.child) 
      if (childsearch !== undefined) { 
       results = results.concat(childsearch); 
      } 
     } 
    } 
    return results; 
} 

see on typescript playground

Answer 2

這會顯得整個樹內，並提供一個數組的所有相應的結果

searchFilter2(search: string, directories: any[]) { 
    let results = []; 
    for (let directory of directories) { 
     if (directory.name.toLowerCase().startsWith(search)) { 
     results.push(directory); 
     } 
     if (directory.child && directory.child.length > 0) { 
     results = [...results, ...this.searchFilter2(search, directory.child)]; 
     } 
    } 
    return results; 
}