CODEWITHSUNDEEP
javascriptreactjsreact-hooksantd
Ashish shetty
Ashish shetty

Reputation: 173

Dynamically creation of Json for antd Tree select

I have Json in the below form

[{
"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"
}]

I want to use this json to display the option items in an antd tree select based on Vertical. I want the filter to look like this , The Antd tree select i am using is 

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

I am using react hooks , could somebody help me to convert the above json to the format Tree select requires so the output could be as shown in the image.

Upvotes: 0

Views: 2420

Answers (1)

barzin.A
barzin.A

Reputation: 1582

I made the demo on CodeSandBox first i created distinct data based on "vertical" values then with map function created children for selectTree data. i hope this could help you :)

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

Upvotes: 2

Related Questions