Динамически создание Json для выбора дерева и дерева - PullRequest
Новая
       28

Динамически создание Json для выбора дерева и дерева

0 голосов
/ 17 января 2020

У меня есть 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, чтобы отобразить пункты опций в дереве дерева выбора на основе Vertical. Я хочу, чтобы фильтр выглядел следующим образом , выбранное мной дерево Antd 

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

Я использую реагирующие хуки, может кто-нибудь помочь мне преобразовать вышеприведенные json в Дерево выбора формата требует, чтобы вывод был таким, как показано на рисунке.

1 Ответ

0 голосов
/ 17 января 2020

Я сделал демонстрацию на CodeSandBox, сначала я создал отдельные данные на основе «вертикальных» значений, а затем с помощью функции карты создал потомков для данных 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
  }))
 };
}];

Демо

...