我正在尝试在包含嵌套下拉列表项的下拉列表中实现搜索输入过滤器。 我从 api 获取的 JSON 数据作为下面给出的响应
API响应
glPlmAsmt.category = {
"page_size": 100,
"total": 5,
"size": 5,
"page_offset": 0,
"items": [
{
"name": "Program Governance",
"status": "active",
"id": "PL-Ca3d6c3bf060",
"created_by": "191ad6043e2e",
"created_time": 1535619902.0,
"subcategories": [
{
"name": "Risk & Issue Management",
"status": "active",
"id": "PL-Ca9ab6aed051",
"created_by": "191ad6043e2e",
"created_time": 1543489628.0,
"subcategories": []
},
{
"name": "Process & Tools",
"status": "active",
"id": "PL-Ca1fd776d743",
"created_by": "191ad6043e2e",
"created_time": 1565863427.0,
"subcategories": []
},
{
"name": "Planning",
"status": "active",
"id": "PL-Caeb46a6dce6",
"created_by": "191ad6043e2e",
"created_time": 1535620426.0,
"subcategories": []
},
{
"name": "Monitoring & Tracking",
"status": "active",
"id": "PL-Caeb46a6d1b2",
"created_by": "191ad6043e2e",
"created_time": 1535620426.0,
"subcategories": []
},
{
"name": "Compliance to Standards",
"status": "active",
"id": "PL-Ca0c8335afc6",
"created_by": "191ad6043e2e",
"created_time": 1535621467.0,
"subcategories": []
}
]
},
{
"name": "Engineering Maturity",
"status": "active",
"id": "PL-Ca3891dbcd9c",
"created_by": "191ad6043e2e",
"created_time": 1535620156.0,
"subcategories": [
{
"name": "Requirements Management",
"status": "active",
"id": "PL-Ca53e3a3f610",
"created_by": "191ad6043e2e",
"created_time": 1535620405.0,
"subcategories": []
},
{
"name": "Technical Solution Management",
"status": "active",
"id": "PL-Ca6b44070713",
"created_by": "191ad6043e2e",
"created_time": 1565863770.0,
"subcategories": []
},
{
"name": "Quality Assurance",
"status": "active",
"id": "PL-Cac7a654f1c9",
"created_by": "191ad6043e2e",
"created_time": 1535620387.0,
"subcategories": []
},
{
"name": "CI\/CD Management",
"status": "active",
"id": "PL-Ca7ba190bcca",
"created_by": "191ad6043e2e",
"created_time": 1565863878.0,
"subcategories": []
}
]
},
{
"name": "Team Management",
"status": "active",
"id": "PL-Ca009c852e4a",
"created_by": "191ad6043e2e",
"created_time": 1535619879.0,
"subcategories": [
{
"name": "Technical Expertise",
"status": "active",
"id": "PL-Ca6c3344d6cf",
"created_by": "191ad6043e2e",
"created_time": 1565864050.0,
"subcategories": []
},
{
"name": "Team Design",
"status": "active",
"id": "PL-Ca414304c958",
"created_by": "191ad6043e2e",
"created_time": 1535620904.0,
"subcategories": []
},
{
"name": "Team Engagement",
"status": "active",
"id": "PL-Cafe3fcd7218",
"created_by": "191ad6043e2e",
"created_time": 1535620895.0,
"subcategories": []
},
{
"name": "Team Fulfillment",
"status": "active",
"id": "PL-Ca59511f47d7",
"created_by": "191ad6043e2e",
"created_time": 1565863978.0,
"subcategories": []
},
{
"name": "Domain Expertise",
"status": "active",
"id": "PL-Ca375bc31659",
"created_by": "191ad6043e2e",
"created_time": 1535620915.0,
"subcategories": []
}
]
},
{
"name": "Client Management",
"status": "active",
"id": "PL-Ca03453473e2",
"created_by": "191ad6043e2e",
"created_time": 1535619885.0,
"subcategories": [
{
"name": "Client Satisfaction",
"status": "active",
"id": "PL-Da414304c960",
"created_by": "PR-EmQR61tch032",
"created_time": 1535620904.0,
"subcategories": []
},
{
"name": "Stakeholder Management",
"status": "active",
"id": "PL-Ca7ff7f293a5",
"created_by": "191ad6043e2e",
"created_time": 1535621056.0,
"subcategories": []
},
{
"name": "Value Strategy",
"status": "active",
"id": "PL-Ca632e3b4005",
"created_by": "191ad6043e2e",
"created_time": 1535621083.0,
"subcategories": []
},
{
"name": "Contract Management",
"status": "active",
"id": "PL-Ca632e8a41a7",
"created_by": "191ad6043e2e",
"created_time": 1535621083.0,
"subcategories": []
}
]
},
{
"name": "Financials",
"status": "active",
"id": "PL-Ca49906fcb17",
"created_by": "191ad6043e2e",
"created_time": 1535619853.0,
"subcategories": [
{
"name": "Revenue",
"status": "active",
"id": "PL-Ca873f87fde3",
"created_by": "191ad6043e2e",
"created_time": 1535620651.0,
"subcategories": []
},
{
"name": "Labor Expenses",
"status": "active",
"id": "PL-Ca5ecf370d0f",
"created_by": "191ad6043e2e",
"created_time": 1535620664.0,
"subcategories": []
},
{
"name": "Other Expenses",
"status": "active",
"id": "PL-Ca1b195c5dfe",
"created_by": "191ad6043e2e",
"created_time": 1535620679.0,
"subcategories": []
}
]
}
]
}
现在我想要实现的是，我正在尝试对 subcategories 的 name 属性实现搜索，这样如果我输入关键字 tec 那么它应该显示结果对象，其中子类别名称包含用户输入的关键字，其中像这样
{
"name": "Engineering Maturity",
"status": "active",
"id": "PL-Ca3891dbcd9c",
"created_by": "191ad6043e2e",
"created_time": 1535620156.0,
"subcategories": [
{
"name": "Technical Solution Management",
"status": "active",
"id": "PL-Ca6b44070713",
"created_by": "191ad6043e2e",
"created_time": 1565863770.0,
"subcategories": []
}
]
},
{
"name": "Team Management",
"status": "active",
"id": "PL-Ca009c852e4a",
"created_by": "191ad6043e2e",
"created_time": 1535619879.0,
"subcategories": [
{
"name": "Technical Expertise",
"status": "active",
"id": "PL-Ca6c3344d6cf",
"created_by": "191ad6043e2e",
"created_time": 1565864050.0,
"subcategories": []
}
]
}
过滤Javascript代码
const groupList = glPlmAsmt.category;
const lowerContains = (x, y) => x.toLowerCase().includes(y.toLowerCase());
const searchKeyword = element;
const groupFiltered = groupList.filter(item =>
(item.name && lowerContains(item.name, searchKeyword)) ||
(item.subcategories.some(subname => lowerContains(subname.name, searchKeyword)))
);
console.log(groupFiltered);
我从这里引用了这段代码，它有点类似如何在嵌套对象数组中实现搜索？
但是对于此 JSON 数据它无法正常工作
第2点
即使实现了搜索，那么如何搜索其他项目，因为数组将在第一个搜索项目中被修改。
我被困住了，请帮忙。
谢谢
const category = {
"page_size": 100,
"total": 5,
"size": 5,
"page_offset": 0,
"items": [
{
"name": "Program Governance",
"status": "active",
"id": "PL-Ca3d6c3bf060",
"created_by": "191ad6043e2e",
"created_time": 1535619902.0,
"subcategories": [
{
"name": "Risk & Issue Management",
"status": "active",
"id": "PL-Ca9ab6aed051",
"created_by": "191ad6043e2e",
"created_time": 1543489628.0,
"subcategories": []
},
{
"name": "Process & Tools",
"status": "active",
"id": "PL-Ca1fd776d743",
"created_by": "191ad6043e2e",
"created_time": 1565863427.0,
"subcategories": []
},
{
"name": "Planning",
"status": "active",
"id": "PL-Caeb46a6dce6",
"created_by": "191ad6043e2e",
"created_time": 1535620426.0,
"subcategories": []
},
{
"name": "Monitoring & Tracking",
"status": "active",
"id": "PL-Caeb46a6d1b2",
"created_by": "191ad6043e2e",
"created_time": 1535620426.0,
"subcategories": []
},
{
"name": "Compliance to Standards",
"status": "active",
"id": "PL-Ca0c8335afc6",
"created_by": "191ad6043e2e",
"created_time": 1535621467.0,
"subcategories": []
}
]
},
{
"name": "Engineering Maturity",
"status": "active",
"id": "PL-Ca3891dbcd9c",
"created_by": "191ad6043e2e",
"created_time": 1535620156.0,
"subcategories": [
{
"name": "Requirements Management",
"status": "active",
"id": "PL-Ca53e3a3f610",
"created_by": "191ad6043e2e",
"created_time": 1535620405.0,
"subcategories": []
},
{
"name": "Technical Solution Management",
"status": "active",
"id": "PL-Ca6b44070713",
"created_by": "191ad6043e2e",
"created_time": 1565863770.0,
"subcategories": []
},
{
"name": "Quality Assurance",
"status": "active",
"id": "PL-Cac7a654f1c9",
"created_by": "191ad6043e2e",
"created_time": 1535620387.0,
"subcategories": []
},
{
"name": "CI\/CD Management",
"status": "active",
"id": "PL-Ca7ba190bcca",
"created_by": "191ad6043e2e",
"created_time": 1565863878.0,
"subcategories": []
}
]
},
{
"name": "Team Management",
"status": "active",
"id": "PL-Ca009c852e4a",
"created_by": "191ad6043e2e",
"created_time": 1535619879.0,
"subcategories": [
{
"name": "Technical Expertise",
"status": "active",
"id": "PL-Ca6c3344d6cf",
"created_by": "191ad6043e2e",
"created_time": 1565864050.0,
"subcategories": []
},
{
"name": "Team Design",
"status": "active",
"id": "PL-Ca414304c958",
"created_by": "191ad6043e2e",
"created_time": 1535620904.0,
"subcategories": []
},
{
"name": "Team Engagement",
"status": "active",
"id": "PL-Cafe3fcd7218",
"created_by": "191ad6043e2e",
"created_time": 1535620895.0,
"subcategories": []
},
{
"name": "Team Fulfillment",
"status": "active",
"id": "PL-Ca59511f47d7",
"created_by": "191ad6043e2e",
"created_time": 1565863978.0,
"subcategories": []
},
{
"name": "Domain Expertise",
"status": "active",
"id": "PL-Ca375bc31659",
"created_by": "191ad6043e2e",
"created_time": 1535620915.0,
"subcategories": []
}
]
},
{
"name": "Client Management",
"status": "active",
"id": "PL-Ca03453473e2",
"created_by": "191ad6043e2e",
"created_time": 1535619885.0,
"subcategories": [
{
"name": "Client Satisfaction",
"status": "active",
"id": "PL-Da414304c960",
"created_by": "PR-EmQR61tch032",
"created_time": 1535620904.0,
"subcategories": []
},
{
"name": "Stakeholder Management",
"status": "active",
"id": "PL-Ca7ff7f293a5",
"created_by": "191ad6043e2e",
"created_time": 1535621056.0,
"subcategories": []
},
{
"name": "Value Strategy",
"status": "active",
"id": "PL-Ca632e3b4005",
"created_by": "191ad6043e2e",
"created_time": 1535621083.0,
"subcategories": []
},
{
"name": "Contract Management",
"status": "active",
"id": "PL-Ca632e8a41a7",
"created_by": "191ad6043e2e",
"created_time": 1535621083.0,
"subcategories": []
}
]
},
{
"name": "Financials",
"status": "active",
"id": "PL-Ca49906fcb17",
"created_by": "191ad6043e2e",
"created_time": 1535619853.0,
"subcategories": [
{
"name": "Revenue",
"status": "active",
"id": "PL-Ca873f87fde3",
"created_by": "191ad6043e2e",
"created_time": 1535620651.0,
"subcategories": []
},
{
"name": "Labor Expenses",
"status": "active",
"id": "PL-Ca5ecf370d0f",
"created_by": "191ad6043e2e",
"created_time": 1535620664.0,
"subcategories": []
},
{
"name": "Other Expenses",
"status": "active",
"id": "PL-Ca1b195c5dfe",
"created_by": "191ad6043e2e",
"created_time": 1535620679.0,
"subcategories": []
}
]
}
]
};
const lowerContains = (x, y) => x.toLowerCase().includes(y.toLowerCase());
const searchKeyword = "tec";
const groupFiltered = category["items"].filter(item =>
(item.name && lowerContains(item.name, searchKeyword)) ||
(item.subcategories.some(t => t.name && lowerContains(t.name, searchKeyword)))
);
console.log(groupFiltered);