仅通过匹配搜索字符串dynamic来筛选内部数组

Question

我有一个嵌套的数组，我的应用程序中有一个搜索功能，我想根据用户类型的搜索字符串来过滤数据，我几乎尝试了所有的解决方案，但都不适用，我只想过滤内部数组，但到目前为止，如果找到一个匹配的，我尝试的解决方案会返回整个数组

[{menu: "Users"
order: 100
sub_menus: [{
order: 100
sub_menu: "Create User"
uuid: "3c502d2a-52b2-4cf0-b121-fed3b13693ef"
},{
order: 10
sub_menu: "Modify"
uuid: "3c502d2a-52b2-4cf0-b121-fed3b13695ef"
}]
uuid: "3c502d2a-52b2-4cf0-b121-fed3b13693ef"
}]

我已经尝试了许多来自互联网的解决方案，但没有预期的输出，下面的函数返回数组中的所有对象，如果其中一个是真的，因为我只想要子菜单内的对象，其子菜单名称与我提供的搜索值相匹配

function filterMenu(menuList) {
return menuList.filter((menu) =>
menu.sub_menus.some((subMenu) =>
subMenu.sub_menu.toLowerCase().match(searchMenu.toLowerCase())
)
);
}

Answer 1

这可以通过两个步骤完成：

1. 对于每个菜单，计算过滤后的子菜单的样子
2. 返回包含已筛选子菜单的菜单，但忽略那些没有结果的菜单

这看起来与此类似：

function filterMenu(menuList) {
const mapped = menuList.map((menu) => ({
// Copy all fields from menu
...menu,
// But overwrite sub_menus with a filtered version
sub_menus: menu.sub_menus.filter((subMenu) =>
subMenu.sub_menu.toLowerCase().match(searchMenu.toLowerCase())
)
}));
// Now ignore menus that have no submenus
return mapped.filter(menu => menu.sub_menus.length);
}

如果您仍然希望接收没有子菜单的菜单，则可以删除最后一个.filter。

请注意，对字符串使用.match而不是.includes可能是不需要的(输入将被视为RegEx，这甚至可能导致RegEx DoS导致的安全问题(，但这是一个无关的问题。

Answer 2

这将创建一个所有子菜单的数组，并筛选出与搜索匹配的子菜单。

let menu = [{
menu: "Users",
order: 100,
sub_menus: [{
order: 100,
sub_menu: "Create User",
uuid: "3c502d2a-52b2-4cf0-b121-fed3b13693ef"
}, {
order: 10,
sub_menu: "Modify",
uuid: "3c502d2a-52b2-4cf0-b121-fed3b13695ef"
}],
uuid: "3c502d2a-52b2-4cf0-b121-fed3b13693ef"
}]
const getSub = str => menu.map(e => e.sub_menus).flat().filter(e => e.sub_menu === str);
console.log(getSub('Modify'));