搜索树结构JSON数据 [英] Search in tree structure JSON data

问题描述

我正在使用搜索选项在树状结构中构建动态菜单.

I am building dynamic menu in a tree structure with the search option.

JSON数据如下所示:

JSON Data looks like below:

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: []
                }]
            }
        ];
    }

下面的代码可在父节点级别搜索项目:

Below code to search items in parent node level:

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事件上调用上述代码，并且它在父节点级别返回了搜索结果.

I am calling above code on keyup event and it returns the search result on the parent node level.

现在我要搜索直到第n个孩子.有帮助吗?

Now I want to do search till the nth child. Any help?

推荐答案

您需要为过滤器提供递归实现，例如:

You need a recursive implementation for your filter, something like:

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;
}

另一种方法可以返回数组中的每个匹配项(就像第n个深度的过滤器一样):

Another approach is possible to return every matching item in your array (act like a nth-depth filter):

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;
}

查看全文