我如何实现嵌套的对象有ParentKey?

Question

我有一个对象数组，所有对象中都有Name, Key，部分对象中有ParentKey。

我想通过唯一的'键'分组对象，不包括那些有'ParentKey'。具有ParentKey的对象应该嵌套在所需的ans中。

初始输入:-

const arr = [
{
Name: 'Manage Leads',
Key: 'Manage Leads',
},
{
Name: 'Dashboard',
Key: 'Dashboard',
},
{
Name: 'Smart Views',
Key: 'Smart Views',
},
{
Name: 'Lead Details',
Key: 'Lead Details',
},
{
Name: 'Opportunity Details',
Key: 'Opportunity Details',
},
{
Name: 'Header',
Key: 'Header',
},
{
Name: 'Settings',
Key: 'Settings',
},
{
Name: 'Test 1',
Key: 'Test1Key',
},
{
Name: 'Test 1.1',
Key: 'Test1.1Key',
ParentKey: 'Test1',
},
{
Name: 'Test 1.2',
Key: 'Test1.2Key',
ParentKey: 'Test1',
},
{
Name: 'Test 1.1.1',
Key: 'Test1.1.1Key',
ParentKey: 'Test 1.1',
},
{
Name: 'Test 1.1.2',
Key: 'Test1.1.2Key',
ParentKey: 'Test 1.1',
},
{
Name: 'Test 1.2.1',
Key: 'Test1.2.1Key',
ParentKey: 'Test 1.2',
},
];

要求输出:-

[
{
groupName: 'Manage Leads',
actionsArr: [{ Name: 'Manage Leads', Key: 'Manage Leads' }],
},
{
groupName: 'Dashboard',
actionsArr: [{ Name: 'Dashboard', Key: 'Dashboard' }],
},
{
groupName: 'Smart Views',
actionsArr: [{ Name: 'Smart Views', Key: 'Smart Views' }],
},
{
groupName: 'Lead Details',
actionsArr: [{ Name: 'Lead Details', Key: 'Lead Details' }],
},
{
groupName: 'Opportunity Details',
actionsArr: [
{
Name: 'Opportunity Details',
Key: 'Opportunity Details',
},
],
},
{
groupName: 'Header',
actionsArr: [{ Name: 'Header', Key: 'Header' }],
},
{
groupName: 'Settings',
actionsArr: [{ Name: 'Settings', Key: 'Settings' }],
},
{
groupName: 'Test1Key',
actionsArr: [
{
Name: 'Test 1',
Key: 'Test1Key',
subActions: [
{
Name: 'Test 1.1',
Key: 'Test1.1',
ParentKey: 'Test1Key',
subActions: [
{
Name: 'Test 1.1.1',
Key: 'Test1.1.1Key',
ParentKey: 'Test 1.1',
},
{
Name: 'Test 1.1.2',
Key: 'Test1.1.2Key',
ParentKey: 'Test 1.1',
},
],
},
{
Name: 'Test 1.2',
Key: 'Test1.2',
ParentKey: 'Test1Key',
subActions: [
{
Name: 'Test 1.2.1',
Key: 'Test1.2.1Key',
ParentKey: 'Test 1.2',
},
],
},
],
},
],
},
];

我能够用以下代码按唯一键分组，但我不能嵌套具有ParentKey的对象。

const groupNames = [...new Set(actions.map((item) => item.GroupKey))];
const actionsList = groupNames.map((groupName) => {
const actionsArr = actions.filter((act) => act.GroupKey === groupName);
return { label: groupName, value: actionsArr }});

Answer 1

我发现给定数据的Key和ParentKey之间存在一些不一致。我已经修复了输入数据的不一致，我将使用相同的。

这就是对我有效的解决办法。

const arr = [
{
Name: "Manage Leads",
Key: "Manage Leads",
},
{
Name: "Dashboard",
Key: "Dashboard",
},
{
Name: "Smart Views",
Key: "Smart Views",
},
{
Name: "Lead Details",
Key: "Lead Details",
},
{
Name: "Opportunity Details",
Key: "Opportunity Details",
},
{
Name: "Header",
Key: "Header",
},
{
Name: "Settings",
Key: "Settings",
},
{
Name: "Test 1",
Key: "Test1Key",
},
{
Name: "Test 1.1",
Key: "Test1.1Key",
ParentKey: "Test 1",
},
{
Name: "Test 1.2",
Key: "Test1.2Key",
ParentKey: "Test 1",
},
{
Name: "Test 1.1.1",
Key: "Test1.1.1Key",
ParentKey: "Test 1.1",
},
{
Name: "Test 1.1.2",
Key: "Test1.1.2Key",
ParentKey: "Test 1.1",
},
{
Name: "Test 1.2.1",
Key: "Test1.2.1Key",
ParentKey: "Test 1.2",
},
];
//recursively look for the child and append child to parent
const appendChild = (parent, arr) => {
for (let index = 0; index < arr.length; index++) {
const childElement = arr[index];
if (childElement.ParentKey == parent.Name) {
appendChild(childElement, arr);
if (parent.subActions) {
parent.subActions.push(childElement);
} else {
parent.subActions = [childElement];
}
//remove the child from that list and match the index
arr.splice(index, 1);
index--;
}
}
};
//convert data into a parent-child hierarchy
const convert = (arr) => {
for (const parent of arr) {
appendChild(parent, arr);
}

//filter out items which has been already added as child/subActions
return arr.filter((x) => !Boolean(x.ParentKey));
};
const groupBy = (items, callback) => {
const groupedData = items.reduce(
(acc, value, index) => (
(acc[callback(value, index, items)] ||= []).push(value), acc
),
{}
);
//convert grouped data as the required output
return Object.entries(groupedData).map(([key, value]) => ({
groupName: key,
actionsArr: value,
}));
};
const data = groupBy(convert(arr), (x) => x.Name);
console.log(JSON.stringify(data, null, 2));

输出:

[
{
"groupName": "Manage Leads",
"actionsArr": [
{
"Name": "Manage Leads",
"Key": "Manage Leads"
}
]
},
{
"groupName": "Dashboard",
"actionsArr": [
{
"Name": "Dashboard",
"Key": "Dashboard"
}
]
},
{
"groupName": "Smart Views",
"actionsArr": [
{
"Name": "Smart Views",
"Key": "Smart Views"
}
]
},
{
"groupName": "Lead Details",
"actionsArr": [
{
"Name": "Lead Details",
"Key": "Lead Details"
}
]
},
{
"groupName": "Opportunity Details",
"actionsArr": [
{
"Name": "Opportunity Details",
"Key": "Opportunity Details"
}
]
},
{
"groupName": "Header",
"actionsArr": [
{
"Name": "Header",
"Key": "Header"
}
]
},
{
"groupName": "Settings",
"actionsArr": [
{
"Name": "Settings",
"Key": "Settings"
}
]
},
{
"groupName": "Test 1",
"actionsArr": [
{
"Name": "Test 1",
"Key": "Test1Key",
"subActions": [
{
"Name": "Test 1.1",
"Key": "Test1.1Key",
"ParentKey": "Test 1",
"subActions": [
{
"Name": "Test 1.1.1",
"Key": "Test1.1.1Key",
"ParentKey": "Test 1.1"
},
{
"Name": "Test 1.1.2",
"Key": "Test1.1.2Key",
"ParentKey": "Test 1.1"
}
]
},
{
"Name": "Test 1.2",
"Key": "Test1.2Key",
"ParentKey": "Test 1",
"subActions": [
{
"Name": "Test 1.2.1",
"Key": "Test1.2.1Key",
"ParentKey": "Test 1.2"
}
]
}
]
}
]
}
]