ツリーデータへのアレイ（AntのデザインTreeSelect）

SkuPak：

私は、この配列を持っています：

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のデザインにより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を使用しました。問題は、私はキーを挿入する方法がわからないということです。

ニーナショルツ：

あなたは望んでいたキーの配列を取得し、レベルに同じ値を探すことにより、キーを減らすことができます。

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のデザインTreeSelect）

おすすめ