Exploring deep within a menu using recursive search and filtering techniques

Question

Exploring deep within a menu using recursive search and filtering techniques

I am currently working on an Angular app and facing a challenge related to the navigation menu. The menu includes a search option for filtering. Below is the JSON structure for the menu:

menuItems: [
{
    name: "Dashboard",
    iconPath: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="105471637850727f7162743e607e77">[email protected]</a>",
    routingPath: "",
    children: [
        {
            name: "Version 1",
            iconPath: "",
            routingPath: "",
            children: [
                {
                    name: "Version 1.1 abc",
                    iconPath: "",
                    routingPath: "",
                    children: [
                        {
                            name: "Version 1.1.1 ccc",
                            iconPath: "",
                            routingPath: "",
                            children: [
                                {
                                    name: "Version 1.1.1.1 hello",
                                    iconPath: "",
                                    routingPath: "",
                                    children: []
                                },
                                ...

This example demonstrates the menu structure. My goal is to display specific menu items based on a search query like "hello," showcasing all relevant data within the object:

https://i.sstatic.net/41chQ.jpg

However, my current solution is not yielding the desired outcome. I've attempted the following code:

private performFiltering() {
    const searchValue: string = this.searchBarInput.nativeElement.value.toLowerCase();

    if (searchValue.length > 0) {
        ...
}

private recursiveSearchInMenu(menu: MenuItemModel, searchValue) {
    let found = menu.children.find((item) => item.name.toLowerCase().includes(searchValue));
    ...
}

The outcome of my implementation can be seen here: https://i.sstatic.net/qaTKr.jpg

If you have any suggestions or ideas on how to improve this search functionality, please share them. Thank you!

angular typescript recursion search filter

Answer 1

Answer №1

It seems that the issue with your code lies in the fact that your current approach will only filter the parent object (Dashboard) and not its content. You may need to consider implementing a recursive function like recursiveSearchInMenu, which can create an array of filtered options while also keeping track of any child objects that are found. This is just one way to tackle the problem.

private recursiveSearchInMenu(menu: MenuItemModel, searchValue) {
    let result = [];
    let found = menu.children.find((item) => item.name.toLowerCase().includes(searchValue));
    if(found)
    {
        result.add(found);
    }else {
        let i = 0;
        while (!found && i < menu.children.length) {
            if (menu.children[i].children && menu.children[i].children.length) {
                found = this.recursiveSearchInMenu(menu.children[i], searchValue);  
                if(found.Length > 0) {
                    result.add({name: menu.children[i].name,
                    iconPath: menu.children[i].iconPath,
                    routingPath : menu.children[i].routingPath,
                    children: found})
                }
            i++;
         }
        }
    }
    return result;
}

Answer 2

It seems that the issue with your code lies in the fact that your current approach will only filter the parent object (Dashboard) and not its content. You may need to consider implementing a recursive function like recursiveSearchInMenu, which can create an array of filtered options while also keeping track of any child objects that are found. This is just one way to tackle the problem.

private recursiveSearchInMenu(menu: MenuItemModel, searchValue) {
    let result = [];
    let found = menu.children.find((item) => item.name.toLowerCase().includes(searchValue));
    if(found)
    {
        result.add(found);
    }else {
        let i = 0;
        while (!found && i < menu.children.length) {
            if (menu.children[i].children && menu.children[i].children.length) {
                found = this.recursiveSearchInMenu(menu.children[i], searchValue);  
                if(found.Length > 0) {
                    result.add({name: menu.children[i].name,
                    iconPath: menu.children[i].iconPath,
                    routingPath : menu.children[i].routingPath,
                    children: found})
                }
            i++;
         }
        }
    }
    return result;
}

Answer 3

Answer №2

Ah, I've cracked it...

Here's the current solution I'm working with:

private performFiltering(): boolean {
    const searchValue: string = this.searchBarInput.nativeElement.value.toLowerCase();
    const isFiltered = searchValue.length > 0;

    this.showSearchButton(isFiltered);

    if (isFiltered) {
        this.filteredMenu.menuItems = this.recursiveSearchInMenu(
            JSON.parse(JSON.stringify(this.fullMenu.menuItems)),
            searchValue
        );
    } else {
        this.filteredMenu.menuItems = this.fullMenu.menuItems;
    }

    return isFiltered;
}

private recursiveSearchInMenu(menuItems: MenuItemModel[], searchValue: string): MenuItemModel[] {
    const matchingMenuItems: MenuItemModel[] = [];

    menuItems.forEach((menuItem) => {
        if (menuItem.name.toLowerCase().includes(searchValue)) {
            matchingMenuItems.push(menuItem);
        } else {
            const matchingChildren = this.recursiveSearchInMenu(menuItem.children, searchValue);

            if (matchingChildren.length > 0) {
                menuItem.children = matchingChildren;
                matchingMenuItems.push(menuItem);
            }
        }
    });

    return matchingMenuItems;
}

If you have any insights on how to enhance this code, your feedback would be greatly appreciated.

Answer 4

Ah, I've cracked it...

Here's the current solution I'm working with:

private performFiltering(): boolean {
    const searchValue: string = this.searchBarInput.nativeElement.value.toLowerCase();
    const isFiltered = searchValue.length > 0;

    this.showSearchButton(isFiltered);

    if (isFiltered) {
        this.filteredMenu.menuItems = this.recursiveSearchInMenu(
            JSON.parse(JSON.stringify(this.fullMenu.menuItems)),
            searchValue
        );
    } else {
        this.filteredMenu.menuItems = this.fullMenu.menuItems;
    }

    return isFiltered;
}

private recursiveSearchInMenu(menuItems: MenuItemModel[], searchValue: string): MenuItemModel[] {
    const matchingMenuItems: MenuItemModel[] = [];

    menuItems.forEach((menuItem) => {
        if (menuItem.name.toLowerCase().includes(searchValue)) {
            matchingMenuItems.push(menuItem);
        } else {
            const matchingChildren = this.recursiveSearchInMenu(menuItem.children, searchValue);

            if (matchingChildren.length > 0) {
                menuItem.children = matchingChildren;
                matchingMenuItems.push(menuItem);
            }
        }
    });

    return matchingMenuItems;
}

If you have any insights on how to enhance this code, your feedback would be greatly appreciated.

Exploring deep within a menu using recursive search and filtering techniques

Answer №1

Answer №2

Similar questions

Trigger a re-initialization when there is a change in the @

Setting up a 2017 Angular 2 seed project with XAMPP: A step-by-step

Navigating with Angular's routerLinkActive and managing query parameters

Developing a function for filtering datasets based on dual conditions

Empty dialog box displayed in production for Angular material datepicker

The Typescript decorator is unable to access the property type within its own scope

Guide on integrating a Single Page Application into an ASP.NET Core library and hosting it from a specific route

Exploring the Power of Angular 2 with NgRx

Angular has not yet processed the MatTableDataSource

Using jQuery to add styling when the user is not on a particular page

Troubleshooting a deletion request in Angular Http that is returning undefined within the MEAN stack

Issue with Adding Additional Property to react-leaflet Marker Component in TypeScript

Organizing list items with interactive buttons on an Ionic grid

Attempting to build a table within a table structure

Using Vue.js, learn how to target a specific clicked component and update its state accordingly

AInspector WCAG evaluation found that mat-select does not meet level A compliance standards

How to effectively manage errors in TypeScript using RxJS?

What is the best layer to handle Entity-DTO conversion in my application?

TS2307: Module '@/*' and respective type declarations could not be located

Managing Visual Studio Code Extension Intellisense: A Guide