Array to tree data (Ant Design TreeSelect)

Question

I've got this array:

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

The data is structured like like a tree, with this hierarchy:

parent_2_api
    parent_1_api
        question_api

(I don't care about the key answer_api).

I need to load it to TreeSelect by Ant Design, requiring this shape:

 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', }, ];

I tried messing around with the underscore library but I can't pull it off. Can someone help me please? Thanks a lot!

EDIT: I started by doing this:

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

This 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"}]}

I was thinking about mapping all the values from temp_0 and then use _.groupBy again. The problem is that I don't know how to insert the key.

Answer 1

You could take an array for the wanted keys and reduce the keys by looking for same value in a level.

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