打字稿 - 使用“for of”迭代会产生错误“TypeError: element is not a function”

Question

I have a basic function that should iterate through the values of an array and filter based on whether the element values exist..

The array has multiple depths:

   public menuList(): any {
        return [
            // SCHEDULER
            {
                route: ["", "scheduler"],
                name: "scheduler",
                moduleId: PLATFORM.moduleName("../components/scheduler/scheduler"),
                title: "scheduler",
                nav: true,
                settings: {
                    icon: "user",
                    roles: ["Employee", "Admin"],
                    pos: "left"
                }
            },

            // CLIENTS
            {
                route: "clients",
                name: "clients",
                moduleId: PLATFORM.moduleName("../components/clients/clientList/clientList"),
                title: "Clients",
                nav: true,
                settings: {
                    icon: "user",
                    roles: ["Employee", "Admin"],
                    pos: "left",
                    nav: [
                        {
                            route: "clients/ClientsList",
                            name: "clientList",
                            moduleId: PLATFORM.moduleName("../components/clients/clientList/clientList"),
                            href: "#clients/clientsList",
                            title: "Client List",
                            settings: {
                                icon: "list",
                                roles: ["Employee", "Admin"],
                            }
                        },
                        {
                            settings: {
                                roles: ["Employee", "Admin"],
                                divider: true,
                            }
                        },
                        {
                            route: "clients/create",
                            name: "newClient",
                            moduleId: PLATFORM.moduleName("../components/clients/newClient/newClient"),
                            href: "#clients/Create",
                            title: "Create Client",
                            settings: {
                                icon: "user",
                                roles: ["Employee", "Admin"],
                            }
                        }
                    ]
                }
            },
        ]
    }
}

This array has just two elements made up of subelements and in the client's element's case three elements under the "nav".

I am trying to construct a function that will traverse every level and remove those that doent satisfy the condition.

I started with this:

public userMenu(userName: string, userRole: string): any {

    var requiredElements = ["route", "name", "moduleId", "title", "nav"];

    for (let element of this.menuList()) {
        var filteredArray = element.filter(function (itm) {
            return requiredElements.indexOf(itm.requiredElements) > -1;
        })

    }
}

However I am getting an error on "element" on the line var filteredArray = element.filter(function (itm) { .

Its saying in the console:

menu2.ts:122 Uncaught TypeError: element.filter is not a function at Menu.73.Menu.userMenu (menu2.ts:122)

Which is that line..

How do I use the "for of" on the "menuList() and then be able to filter on it? in this case its saying that element is not something I can iterate over - or filter etc....

EDIT As suggested I changed this to:

        public userMenu(userName: string, userRole: string): any {

    var requiredElements = ["route", "name", "moduleId", "title", "nav"];

    this.menuList().forEach(function (item) {
        var filteredArray = item.filter(function (itm) {
            return requiredElements.indexOf(itm.requiredElements) > -1;
        })

        console.log("filteredArray: ", filteredArray)
    })
}

and still got the same error.

What is it that is causing filter to fail and how do I iterate over and filter on my array above?

Answer 1

You're trying to apply the filter to individual objects inside the array. That's not how it works: you're supposed to filter the entire array, not its elements individually.

Secondly, .indexOf() works for arrays. You can't use it to check for object keys. .hasOwnProperty() is for that purpose. Below it's used combined with .every() to check that all required keys exist.

Finally a minor point: since you're using TypeScript, you should avoid var in favor of const and let .

public userMenu(userName: string, userRole: string): any {

    const requiredElements = ["route", "name", "moduleId", "title", "nav"];

    const filteredArray = this.menuList().filter(function (itm) {
        return requiredElements.every(function(key) {
            return itm.hasOwnProperty(key);
        });
    });
}