数组到树数据(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(。

我需要通过蚂蚁设计将其加载到 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;
};

这将返回：

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