数组转树数据（Ant Design TreeSelect）

Question

我有这个数组：

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）。

我需要用Ant Design加载到TreeSelect中，需要这样的形状：

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

这个returns：

{"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。问题是我不知道怎么插入钥匙

Answer 1

您可以为所需的键获取一个数组，并通过在级别中查找相同的值来减少键。

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

数组转树数据（Ant Design TreeSelect）

Array to tree data (Ant Design TreeSelect)

javascript

underscore.js