Массив в данные дерева (Ant Design TreeSelect) - PullRequest
Новая
       7

Массив в данные дерева (Ant Design TreeSelect)

3 голосов
/ 13 февраля 2020

У меня есть этот массив: 

const key_api = [
    {"parent2_api":"Social","parent1_api":"Instagram","question_api":"AAA","answer_api":"000"},
    {"parent2_api":"Social","parent1_api":"Instagram","question_api":"AAA","answer_api":"111"},
    {"parent2_api":"Social","parent1_api":"Instagram","question_api":"BBB","answer_api":"000"},
    {"parent2_api":"Social","parent1_api":"Instagram","question_api":"BBB","answer_api":"111"},
    {"parent2_api":"Social","parent1_api":"Instagram","question_api":"BBB","answer_api":"222"},
    {"parent2_api":"Social","parent1_api":"Twitter","question_api":"CCC","answer_api":"333"},
    {"parent2_api":"Social","parent1_api":"Twitter","question_api":"CCC","answer_api":"444"},
    {"parent2_api":"TV Channel","parent1_api":"CBS","question_api":"DDD","answer_api":"555"},
    {"parent2_api":"TV Channel","parent1_api":"CBS","question_api":"DDD","answer_api":"666"}
    ]

Данные структурированы как дерево, с такой иерархией: 

parent_2_api
    parent_1_api
        question_api

(мне не важен ключ answer_api).

Мне нужно загрузить его в TreeSelect от Ant Design, требуя эту форму: 

const treeData = [
  {
    title: 'Node1',
    value: '0-0',
    key: '0-0',
    children: [
      {
        title: 'Child Node1',
        value: '0-0-1',
        key: '0-0-1',
      },
      {
        title: 'Child Node2',
        value: '0-0-2',
        key: '0-0-2',
      },
    ],
  },
  {
    title: 'Node2',
    value: '0-1',
    key: '0-1',
  },
];

Я пытался возиться с библиотекой подчеркивания, но не могу ее выполнить. Может кто-то мне помочь, пожалуйста? Большое спасибо!

РЕДАКТИРОВАТЬ: Я начал с этого: 

const treeBuilder = array => {
  var temp_0 = _.groupBy(key_api, "parent2_api");
  return temp_0;
};

Возвращает: 

{"Social":[{"parent2_api":"Social","parent1_api":"Instagram","question_api":"AAA","answer_api":"000"},{"parent2_api":"Social","parent1_api":"Instagram","question_api":"AAA","answer_api":"111"},{"parent2_api":"Social","parent1_api":"Instagram","question_api":"BBB","answer_api":"000"},{"parent2_api":"Social","parent1_api":"Instagram","question_api":"BBB","answer_api":"111"},{"parent2_api":"Social","parent1_api":"Instagram","question_api":"BBB","answer_api":"222"},{"parent2_api":"Social","parent1_api":"Twitter","question_api":"CCC","answer_api":"333"},{"parent2_api":"Social","parent1_api":"Twitter","question_api":"CCC","answer_api":"444"}],"TV Channel":[{"parent2_api":"TV Channel","parent1_api":"CBS","question_api":"DDD","answer_api":"555"},{"parent2_api":"TV Channel","parent1_api":"CBS","question_api":"DDD","answer_api":"666"}]}

Я думал о сопоставлении всех значений из temp_0 и затем снова использовал _.groupBy. Проблема в том, что я не знаю, как вставить ключ.

1 Ответ

2 голосов
/ 13 февраля 2020

Вы можете взять массив для искомых ключей и уменьшить ключи, посмотрев одно и то же значение на уровне. 

var data = [{ parent2_api: "Social", parent1_api: "Instagram", question_api: "AAA", answer_api: "000" }, { parent2_api: "Social", parent1_api: "Instagram", question_api: "AAA", answer_api: "111" }, { parent2_api: "Social", parent1_api: "Instagram", question_api: "BBB", answer_api: "000" }, { parent2_api: "Social", parent1_api: "Instagram", question_api: "BBB", answer_api: "111" }, { parent2_api: "Social", parent1_api: "Instagram", question_api: "BBB", answer_api: "222" }, { parent2_api: "Social", parent1_api: "Twitter", question_api: "CCC", answer_api: "333" }, { parent2_api: "Social", parent1_api: "Twitter", question_api: "CCC", answer_api: "444" }, { parent2_api: "TV Channel", parent1_api: "CBS", question_api: "DDD", answer_api: "555" }, { parent2_api: "TV Channel", parent1_api: "CBS", question_api: "DDD", answer_api: "666" }],
    keys = ['parent2_api', 'parent1_api', 'question_api'],
    result = data.reduce((r, o, i) => {
        keys.reduce((level, k) => {
            var temp = (level.children = level.children || []).find(({ title }) => title === o[k]);
            if (!temp) level.children.push(temp = {
                title: o[k],
                key: level.key + '-' + level.children.length,
                value: level.value + '-' + level.children.length
            });
            return temp;
        }, { children: r, key: '0', value: '0' });
        return r;
    }, []);

console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
...