Apologies if there is already an answer for this, I’ve been unable to locate one that has worked for me.
I have defined a menu system for React where the information is stored in an array of objects. Each object has the posibility of having sub items (objects in another array) and I’m looking to filter the entire menu for values.
Menu Object
[
{
"key": "Dashboard",
"icon": {
"type": {},
"key": null,
"ref": null,
"props": {},
"_owner": null,
"_store": {}
},
"title": "Dashboard",
"component": {
"type": {},
"key": null,
"ref": null,
"props": {
"to": "/admin/",
"children": "Dashboard"
},
"_owner": null,
"_store": {}
}
},
{
"key": "Clients",
"icon": {
"type": {},
"key": null,
"ref": null,
"props": {},
"_owner": null,
"_store": {}
},
"isSubMenu": true,
"title": "Clients",
"submenus": [
{
"key": "Clients.Add",
"title": "Create Client",
"component": {
"type": {},
"key": null,
"ref": null,
"props": {
"to": "/admin/Clients/create",
"children": "Create Client"
},
"_owner": null,
"_store": {}
}
},
{
"key": "Clients.List",
"title": "List Clients",
"component": {
"type": {},
"key": null,
"ref": null,
"props": {
"to": "/admin/Clients/",
"children": "List Clients"
},
"_owner": null,
"_store": {}
}
},
{
"key": "Clients.Search",
"title": "Search Clients",
"component": {
"type": {},
"key": null,
"ref": null,
"props": {
"to": "/admin/Clients/search",
"children": "Search Clients"
},
"_owner": null,
"_store": {}
}
}
]
},
{
"key": "Contractors",
"icon": {
"type": {},
"key": null,
"ref": null,
"props": {},
"_owner": null,
"_store": {}
},
"isSubMenu": true,
"title": "Contractors",
"submenus": [
{
"key": "Contractors.Add",
"title": "Create Contractor",
"component": {
"type": {},
"key": null,
"ref": null,
"props": {
"to": "/admin/Contractors/create",
"children": "Create Contractor"
},
"_owner": null,
"_store": {}
}
},
{
"key": "Contractors.List",
"title": "List Contractors",
"component": {
"type": {},
"key": null,
"ref": null,
"props": {
"to": "/admin/Contractors/",
"children": "List Contractors"
},
"_owner": null,
"_store": {}
}
},
{
"key": "Contractors.Search",
"title": "Search Contractors",
"component": {
"type": {},
"key": null,
"ref": null,
"props": {
"to": "/admin/Contractors/search",
"children": "Search Contractors"
},
"_owner": null,
"_store": {}
}
}
]
},
{
"key": "Jobs",
"icon": {
"type": {},
"key": null,
"ref": null,
"props": {},
"_owner": null,
"_store": {}
},
"isSubMenu": true,
"title": "Jobs",
"submenus": [
{
"key": "Jobs.Add",
"title": "Create Job",
"component": {
"type": {},
"key": null,
"ref": null,
"props": {
"to": "/admin/Jobs/create",
"children": "Create Job"
},
"_owner": null,
"_store": {}
}
},
{
"key": "Jobs.List",
"title": "List Jobs",
"component": {
"type": {},
"key": null,
"ref": null,
"props": {
"to": "/admin/Jobs/",
"children": "List Jobs"
},
"_owner": null,
"_store": {}
}
},
{
"key": "Jobs.Search",
"title": "Search Jobs",
"component": {
"type": {},
"key": null,
"ref": null,
"props": {
"to": "/admin/Jobs/search",
"children": "Search Jobs"
},
"_owner": null,
"_store": {}
}
}
]
},
{
"isDivider": true
},
{
"key": "Config",
"icon": {
"type": {},
"key": null,
"ref": null,
"props": {},
"_owner": null,
"_store": {}
},
"isSubMenu": true,
"title": "Configuration",
"submenus": [
{
"key": "Config.Category.Add",
"title": "Create Category",
"component": {
"type": {},
"key": null,
"ref": null,
"props": {
"to": "/admin/Config/Category/create",
"children": "Create Category"
},
"_owner": null,
"_store": {}
}
},
{
"key": "Config.Category.List",
"title": "List Categories",
"component": {
"type": {},
"key": null,
"ref": null,
"props": {
"to": "/admin/Config/Category/",
"children": "List Categories"
},
"_owner": null,
"_store": {}
}
},
{
"key": "Config.Specialist.Add",
"title": "Create Specialist",
"component": {
"type": {},
"key": null,
"ref": null,
"props": {
"to": "/admin/Config/Specialist/create",
"children": "Create Specialist"
},
"_owner": null,
"_store": {}
}
},
{
"key": "Config.Specialist.List",
"title": "List Specialists",
"component": {
"type": {},
"key": null,
"ref": null,
"props": {
"to": "/admin/Config/Specialist/",
"children": "List Specialists"
},
"_owner": null,
"_store": {}
}
},
{
"key": "Config.Status.Add",
"title": "Create Status",
"component": {
"type": {},
"key": null,
"ref": null,
"props": {
"to": "/admin/Config/Status/create",
"children": "Create Status"
},
"_owner": null,
"_store": {}
}
},
{
"key": "Config.Status.List",
"title": "List Statuses",
"component": {
"type": {},
"key": null,
"ref": null,
"props": {
"to": "/admin/Config/Status/",
"children": "List Statuses"
},
"_owner": null,
"_store": {}
}
}
]
},
{
"key": "UserManagement",
"icon": {
"type": {},
"key": null,
"ref": null,
"props": {},
"_owner": null,
"_store": {}
},
"isSubMenu": true,
"title": "User Management",
"submenus": [
{
"key": "UserManagement.Add",
"title": "Create User",
"component": {
"type": {},
"key": null,
"ref": null,
"props": {
"to": "/admin/UserManagement/create",
"children": "Create User"
},
"_owner": null,
"_store": {}
}
},
{
"key": "UserManagement.List",
"title": "List Users",
"component": {
"type": {},
"key": null,
"ref": null,
"props": {
"to": "/admin/UserManagement/",
"children": "List Users"
},
"_owner": null,
"_store": {}
}
}
]
},
{
"isDivider": true
},
{
"key": "LockScreen",
"icon": {
"type": {},
"key": null,
"ref": null,
"props": {},
"_owner": null,
"_store": {}
},
"title": "Lock Screen",
"component": "Lock Screen"
}
]
So if I were to filter this on title for the value “list” it should return back
[
{
"key": "Clients",
"icon": {
"type": {},
"key": null,
"ref": null,
"props": {},
"_owner": null,
"_store": {}
},
"isSubMenu": true,
"title": "Clients",
"submenus": [
{
"key": "Clients.List",
"title": "List Clients",
"component": {
"type": {},
"key": null,
"ref": null,
"props": {
"to": "/admin/Clients/",
"children": "List Clients"
},
"_owner": null,
"_store": {}
}
}
]
},
{
"key": "Contractors",
"icon": {
"type": {},
"key": null,
"ref": null,
"props": {},
"_owner": null,
"_store": {}
},
"isSubMenu": true,
"title": "Contractors",
"submenus": [
{
"key": "Contractors.List",
"title": "List Contractors",
"component": {
"type": {},
"key": null,
"ref": null,
"props": {
"to": "/admin/Contractors/",
"children": "List Contractors"
},
"_owner": null,
"_store": {}
}
},
]
},
{
"key": "Jobs",
"icon": {
"type": {},
"key": null,
"ref": null,
"props": {},
"_owner": null,
"_store": {}
},
"isSubMenu": true,
"title": "Jobs",
"submenus": [
{
"key": "Jobs.List",
"title": "List Jobs",
"component": {
"type": {},
"key": null,
"ref": null,
"props": {
"to": "/admin/Jobs/",
"children": "List Jobs"
},
"_owner": null,
"_store": {}
}
},
]
},
{
"key": "Config",
"icon": {
"type": {},
"key": null,
"ref": null,
"props": {},
"_owner": null,
"_store": {}
},
"isSubMenu": true,
"title": "Configuration",
"submenus": [
{
"key": "Config.Category.List",
"title": "List Categories",
"component": {
"type": {},
"key": null,
"ref": null,
"props": {
"to": "/admin/Config/Category/",
"children": "List Categories"
},
"_owner": null,
"_store": {}
}
},
{
"key": "Config.Specialist.List",
"title": "List Specialists",
"component": {
"type": {},
"key": null,
"ref": null,
"props": {
"to": "/admin/Config/Specialist/",
"children": "List Specialists"
},
"_owner": null,
"_store": {}
}
},
{
"key": "Config.Status.List",
"title": "List Statuses",
"component": {
"type": {},
"key": null,
"ref": null,
"props": {
"to": "/admin/Config/Status/",
"children": "List Statuses"
},
"_owner": null,
"_store": {}
}
}
]
},
{
"key": "UserManagement",
"icon": {
"type": {},
"key": null,
"ref": null,
"props": {},
"_owner": null,
"_store": {}
},
"isSubMenu": true,
"title": "User Management",
"submenus": [
{
"key": "UserManagement.List",
"title": "List Users",
"component": {
"type": {},
"key": null,
"ref": null,
"props": {
"to": "/admin/UserManagement/",
"children": "List Users"
},
"_owner": null,
"_store": {}
}
}
]
}
]
Or it should return back
[
{
"key": "Clients.List",
"title": "List Clients",
"component": {
"type": {},
"key": null,
"ref": null,
"props": {
"to": "/admin/Clients/",
"children": "List Clients"
},
"_owner": null,
"_store": {}
}
},
{
"key": "Contractors.List",
"title": "List Contractors",
"component": {
"type": {},
"key": null,
"ref": null,
"props": {
"to": "/admin/Contractors/",
"children": "List Contractors"
},
"_owner": null,
"_store": {}
}
},
{
"key": "Jobs.List",
"title": "List Jobs",
"component": {
"type": {},
"key": null,
"ref": null,
"props": {
"to": "/admin/Jobs/",
"children": "List Jobs"
},
"_owner": null,
"_store": {}
}
},
{
"key": "Config.Category.List",
"title": "List Categories",
"component": {
"type": {},
"key": null,
"ref": null,
"props": {
"to": "/admin/Config/Category/",
"children": "List Categories"
},
"_owner": null,
"_store": {}
}
},
{
"key": "Config.Specialist.List",
"title": "List Specialists",
"component": {
"type": {},
"key": null,
"ref": null,
"props": {
"to": "/admin/Config/Specialist/",
"children": "List Specialists"
},
"_owner": null,
"_store": {}
}
},
{
"key": "Config.Status.List",
"title": "List Statuses",
"component": {
"type": {},
"key": null,
"ref": null,
"props": {
"to": "/admin/Config/Status/",
"children": "List Statuses"
},
"_owner": null,
"_store": {}
}
},
{
"key": "UserManagement.List",
"title": "List Users",
"component": {
"type": {},
"key": null,
"ref": null,
"props": {
"to": "/admin/UserManagement/",
"children": "List Users"
},
"_owner": null,
"_store": {}
}
}
]
At present I have the following which works for the 1st level objects, but the sub menu’s all get returned:
const MenuSearch = (value) => {
const SearchTerm = value.toLowerCase();
console.log(SearchTerm, MenuItems);
if (!value || value.length < 1){
// show all menu items
SetMenuItemsFiltered(MenuItems);
} else {
let temp = [...MenuItems];
SetMenuItemsFiltered(temp.filter((MenuItem) => {
if (!MenuItem.isSubMenu && !MenuItem.isDivider){
return MenuItem.title.toLowerCase().includes(SearchTerm);
} else if (MenuItem.isSubMenu){
return MenuItem.submenus.filter((SubMenuItem) => {
const SubMenuItemLabel = SubMenuItem.title.toLowerCase();
console.log(SubMenuItemLabel, SearchTerm, SubMenuItemLabel.includes(SearchTerm))
return SubMenuItemLabel.includes(SearchTerm.toLowerCase());
})
}
}));
}
}