javascript - 从子节点ID中查找子节点的父节点?
问题描述
我有一个对象数组,其中有多个子节点,如何从子对象 id 中找到父对象。
[
{
id: "a1",
name: "apple",
subGroups: [
{
id: "a2",
name: "apple-a",
subGroups: [
{
id: "a3",
name: "apple-b",
subGroups: [
{
id: "a4",
name: "apple-c",
subGroups: [
{
id: "a5",
name: "apple-d",
subGroups: [
]
}
]
}
]
}
]
}
]
},
{
id: "b2",
name: "orange",
subGroups: [
{
id: "b2",
name: "orange-a",
subGroups: [
{
id: "b3",
name: "orange-b",
subGroups: [
{
id: "b4",
name: "orange-c",
subGroups: [
{
id: "b5",
name: "orange-d",
subGroups: [
]
}
]
}
]
}
]
}
]
}
];
如果id = a4
,则输出应为:
[
{
id: "a1",
name: "apple",
subGroups: [
{
id: "a2",
name: "apple-a",
subGroups: [
{
id: "a3",
name: "apple-b",
subGroups: [
{
id: "a4",
name: "apple-c",
subGroups: [
{
id: "a5",
name: "apple-d",
subGroups: [
]
}
]
}
]
}
]
}
]
}
]
如果id = b3
,输出应该是:
[
{
id: "b2",
name: "orange",
subGroups: [
{
id: "b2",
name: "orange-a",
subGroups: [
{
id: "b3",
name: "orange-b",
subGroups: [
{
id: "b4",
name: "orange-c",
subGroups: [
{
id: "b5",
name: "orange-d",
subGroups: [
]
}
]
}
]
}
]
}
]
}
]
我试过了:
const find = (array, id) => (Array.isArray(array) ?
array : [array]).flatMap(o => o.id=== id? o : find(o.subGroups, id)), data = group, result = find(data, event.id);
解决方案
您可以通过 3 个步骤完成:
- 使用递归技术来确定
parentID
每个孩子都是这样的。
[
{"id": "a1","parentId": "a1"},
{"id": "a2","parentId": "a1"},
...
{"id": "b2", "parentId": "b2"},
{"id": "b3", "parentId": "b2"}
...
]
- 完全
parentId
像childID
这样
const parentId = child_parent_Mapping.find(r => r.id === childID)?.parentId;
arr
从by过滤结果parentId
。
let arr = [{ id: "a1", name: "apple", subGroups: [{id: "a2", name: "apple-a", subGroups: [{id: "a3", name: "apple-b", subGroups: [{id: "a4", name: "apple-c", subGroups: [{id: "a5", name: "apple-d", subGroups:[]}]}]}]}]}, { id: "b2", name: "orange", subGroups: [{id: "b2", name: "orange-a", subGroups: [{id: "b3", name: "orange-b", subGroups: [{id: "b4", name: "orange-c", subGroups: [{id: "b5", name: "orange-d", subGroups:[]}]}]}]}]}];
// Step 1
const flatItems = (arr, parentId = "") => {
return arr.flatMap(({id, subGroups}) => {
const childrens = flatItems(subGroups, parentId || id);
return [{id, parentId: parentId || id}, ...childrens];
});
};
const child_parent_Mapping = flatItems(arr);
const filter_arr = (childID) => {
// Step 2
const parentId = child_parent_Mapping.find(r => r.id === childID)?.parentId;
// Step 3
return arr.filter(r => r.id === parentId);
}
console.log({Child: "a1", output: filter_arr('a1')});
console.log({Child: "a4", output: filter_arr('a4')});
console.log({Child: "b3", output: filter_arr('b3')});
.as-console-wrapper { max-height: 100% !important; top: 0; }
推荐阅读
- python - 以指定格式填充缺失值
- python - Django DateField:输入没有年份的日期来表示今年
- python - 气流 DAG 使用 PythonOperator 失败并出现“`python_callable` 参数必须是可调用的”异常
- reactjs - 如何理解 useRef() 和 AnimateFrame 部分的使用
- c++ - 按大小拆分 wchar_t
- mysql - 如何解决这个 mysql 错误 #1093 - You can't specify target table 'person' for update in FROM 子句
- sql - 是否可以使用 SDK 区分基于 Cognos SQL 的报告和基于多维数据集/包的报告?
- javascript - 一次让 axios 请求一个
- javascript - 如何根据 Json 在 React 中创建动态表单?
- javascript - JS:最小化浏览器时,setTimeout 被 Chrome 浏览器限制