如何在多级对象数组中查找值
我正在尝试实现一个搜索框，如果我开始在其中搜索一个值，它将在嵌套的对象数组中查找目标，如下所示：-
[
{
"groupId": 1,
"groupName": "Americas",
"groupItems": [
{
"id": 5,
"name": "Brazil",
"parentID": 1,
"parentName": "Americas"
},
{
"id": 6,
"name": "Canada",
"parentID": 1,
"parentName": "Americas"
}
],
"isExpanded": false,
"toggleAllSelection": false
},
{
"groupId": 2,
"groupName": "APAC",
"groupItems": [
{
"id": 7,
"name": "Australia",
"parentID": 2,
"parentName": "APAC"
},
{
"id": 8,
"name": "China",
"parentID": 2,
"parentName": "APAC"
}
],
"isExpanded": false,
"toggleAllSelection": false
},
{
"groupId": 3,
"groupName": "Europe",
"groupItems": [
{
"id": 9,
"name": "Belgium",
"parentID": 3,
"parentName": "Europe"
},
{
"id": 7,
"name": "Austria",
"parentID": 2,
"parentName": "APAC"
},
{
"id": 10,
"name": "Bulgaria",
"parentID": 3,
"parentName": "Europe"
}
],
"isExpanded": false,
"toggleAllSelection": false
}
]
现在我想在数组中的每个对象数组中搜索name属性。当有匹配时，我的函数应该以相同的格式返回数据，因为它将自动完成，所以它应该是部分匹配而不是完全匹配。所以如果在输入框中搜索它应该返回groupItemsgroupaus
[{
"groupId": 2,
"groupName": "APAC",
"groupItems": [
{
"id": 7,
"name": "Australia",
"parentID": 2,
"parentName": "APAC"
}],
"isExpanded": false,
"toggleAllSelection": false,
},
{
"groupId": 3,
"groupName": "Europe",
"groupItems": [
{
"id": 7,
"name": "Austria",
"parentID": 2,
"parentName": "APAC"
}
],
"isExpanded": false,
"toggleAllSelection": false
}
]
繁星点点滴滴3回答
-
长风秋雁
const findByName = (data, name) => { const result = data.reduce((m, { groupItems, ...rest }) => { let mapGrpItems = (groupItems || []).filter((item) => item.name.includes(name) ); if (mapGrpItems.length) { m.push({ ...rest, groupItems: mapGrpItems }); } return m; }, []); return result;};const findByName = (data, name) => { const result = data.reduce((m, { groupItems, ...rest }) => { let mapGrpItems = (groupItems || []).filter((item) => item.name.includes(name) ); if (mapGrpItems.length) { m.push({ ...rest, groupItems: mapGrpItems }); } return m; }, []); return result;};const data = [{"groupId":1,"groupName":"Americas","groupItems":[{"id":5,"name":"Brazil","parentID":1,"parentName":"Americas"},{"id":6,"name":"Canada","parentID":1,"parentName":"Americas"}],"isExpanded":false,"toggleAllSelection":false},{"groupId":2,"groupName":"APAC","groupItems":[{"id":7,"name":"Australia","parentID":2,"parentName":"APAC"},{"id":8,"name":"China","parentID":2,"parentName":"APAC"}],"isExpanded":false,"toggleAllSelection":false},{"groupId":3,"groupName":"Europe","groupItems":[{"id":9,"name":"Belgium","parentID":3,"parentName":"Europe"},{"id":7,"name":"Austria","parentID":2,"parentName":"APAC"},{"id":10,"name":"Bulgaria","parentID":3,"parentName":"Europe"}],"isExpanded":false,"toggleAllSelection":false}]console.log(JSON.stringify(findByName(data, "Aus"), null, 2)); -
白猪掌柜的
您可以将Arrays.filter用于 JSON 数组中每个外部对象中的组项目，以过滤掉与您的搜索查询匹配的项目。你可以这样写：let autocomplete = (key) => { // arr = Your Data let result = [] arr.forEach(grp=> { let out = grp let res = grp.groupItems.filter(item => item.name.toLowerCase().includes(key.toLowerCase())) if(res.length!=0) { out.groupItems = res result.push(out)}})return result -
德玛西亚99
在实施此之前，我肯定会尝试通过您尝试做的事情进行推理。能够通过这样的解决方案进行推理是编程工作的 99%。function filterGroups(filter) { const result = []; myObj.forEach(group => { const filteredGroups = group.groupItems.filter(groupItem => { return groupItem.name.toLowerCase().includes(filter); }); if (filteredGroups.length > 1) { result.push({ ...group, groupItems: filteredGroups }); } }); return result;}
随时随地看视频慕课网APP
相关分类
JavaScript