为antd Tree select动态创建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树中显示选项项，select on Vertical。I want the filter to look like this，我使用的Antd树选择是

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

我正在使用react钩子，有人能帮我把上面的json转换成Tree select要求的格式吗?这样输出就可以如图所示。

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
  }))
 };
}];

Demo