动态创建用于 antd 树选择的 Json

Question

我在下面的形式中有Json。

[{
"shortName": "e2e",
"displayName": "E2E",
"description": "This is demo managed product",
"vertical": "Finance"   
},
{
"shortName": "sfdsgs",
"displayName": "fsaewgs",
"description": "anything",
"vertical": "Community"
},
{
"shortName": "fga",
"displayName": "xcdf",
"description": "agfsf",
"vertical": "Finance"
}]

我想使用此 json 在基于垂直选择的 antd 树中显示选项项。 我希望过滤器看起来像这样，我正在使用的 Antd 树选择是

<TreeSelect
placeholder="Filter here"
dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
style={{ width: "100%" }}
treeData={data}
treeCheckable={true}
onChange={onChange}
treeIcon={true}
/>

我正在使用反应钩子，有人可以帮助我将上述 json 转换为树选择所需的格式，以便输出如图所示。

Answer 1

我在CodeSandBox上做了演示 首先，我根据"垂直"值创建了不同的数据，然后使用map函数为selectTree数据创建了子项。 我希望这可以帮助您:)

const ConvertToTreeNode = () => {
const distinctData = [...new Set(OriginalJson.map(x => x.vertical))];
return [{
title: "Vertical",
value: "0-0",
key: "0-0",
children: distinctData.map((x, index) => ({
value: `0-0-${index}`,
key: `0-0-${index}`,
title: x
}))
};
}];

演示