将平面数据转换为 3 级层次结构/树

如何解决将平面数据转换为 3 级层次结构/树

我目前正在将我的平面数据转换为具有 2 个级别的层次结构，但我现在需要向该数据添加额外的第 3 个级别。到目前为止，我还无法弄清楚如何通过现有方法进行修改。我也乐于接受全新的方法。

这是我目前用来进行转换的代码：

        chartdata = sfdata.data.reduce((acc,{
            items: [cat,val,salesTY,salesLY,unitsTY,unitsLY]
        }) => {
            acc[cat] = acc[cat] || [];
            acc[cat].push({
                name: val,salesTY: salesTY,salesLY: salesLY,unitsTY: unitsTY,unitsLY: unitsLY
            });
            return acc;
        },{});

        // Generate desired output structure.
        chartdata = Object.entries(chartdata).map(([k,v]) => ({
            category: k,children: v
        }));

它映射到不同的类别，然后将该映射转换为类别>子结构

这是我使用这种树结构的小提琴：http://jsfiddle.net/zt4nhxcw/3/

我在这里开始了一个新的小提琴，包括新的品牌数据：http://jsfiddle.net/t1uz85b2/

目标是添加第 3 个级别。所以每个 2 级的孩子都会在他们下面有品牌。

以下是数据输入方式的一小段：

[
  {
    "items": [
      "SSD","PBNA","MOUNTAIN DEW",851255.3500000001,672407.8399999997,782364.9999999991,641579.0000000006
    ],"hints": {
      "index": 0
    }
  },{
    "items": [
      "Energy","RED BULL NORTH AMERICA","RED BULL",836632.2299999997,654021.2899999995,267216,214321.00000000015
    ],"hints": {
      "index": 1
    }
  },{
    "items": [
      "SSD","PEPSI",478704.02999999974,392746.69999999995,533557.0000000006,457008.0000000001
    ],"hints": {
      "index": 4
    }
  },"RED BULL EDITIONS",449618.55000000016,328150.8999999997,162428.9999999999,117521.00000000001
    ],"hints": {
      "index": 5
    }
  },"CCNA","COKE",349685.7899999996,276766.95,445485.0000000002,351214.0000000003
    ],"hints": {
      "index": 9
    }
  }
]

这是我试图实现的最终结构：

[
  {
    "category": "SSD","children": [
      {
        "brand": "PBNA","children": [
          {
            "name": "MOUNTAIN DEW","salesTY": 851255.3500000001,"salesLY": 672407.8399999997,"unitsTY": 782364.9999999991,"unitsLY": 641579.0000000006
          }
        ]
      },{
        "brand": "CCNA","children": [
          {
            "name": "COKE","salesTY": 349685.7899999996,"salesLY": 276766.95,"unitsTY": 445485.0000000002,"unitsLY": 351214.0000000003
          }
        ]
      }
    ]
  },{
    "category": "Energy","children": [
      {
        "brand": "RED BULL NORTH AMERICA","children": [
          {
            "name": "RED BULL","salesTY": 836632.2299999997,"salesLY": 654021.2899999995,"unitsTY": 267216,"unitsLY": 214321.00000000015
          },{
            "name": "RED BULL EDITIONS","salesTY": 449618.55000000016,"salesLY": 328150.8999999997,"unitsTY": 162428.9999999999,"unitsLY": 117521.00000000001
          }
        ]
      }
    ]
  }
]

解决方法

您可以采用动态方法并采用包含所有值的键和所需深度限制的数组。

const
    data = [{ items: ["SSD","PBNA","MOUNTAIN DEW",851255.3500000001,672407.8399999997,782364.9999999991,641579.0000000006],hints: { index: 0 } },{ items: ["Energy","RED BULL NORTH AMERICA","RED BULL",836632.2299999997,654021.2899999995,267216,214321.00000000015],hints: { index: 1 } },{ items: ["SSD","PEPSI",478704.02999999974,392746.69999999995,533557.0000000006,457008.0000000001],hints: { index: 4 } },"RED BULL EDITIONS",449618.55000000016,328150.8999999997,162428.9999999999,117521.00000000001],hints: { index: 5 } },"CCNA","COKE",349685.7899999996,276766.95,445485.0000000002,351214.0000000003],hints: { index: 9 } }],keys = ['category','brand','name','salesTY','salesLY','unitsTY','unitsLY'],limit = 2,result = data
        .reduce((temp,{ items }) => {
            keys
                .slice(0,limit)
                .reduce(function (r,k,i) {
                    if (!r[items[i]]) {
                        r[items[i]] = { _: [] };
                        r._.push({ [k]: items[i],children: r[items[i]]._ });
                    }
                    return r[items[i]];
                },temp)
                ._
                .push(keys
                    .slice(limit)
                    .reduce((o,i) => (o[k] = items[i + limit],o),{})
                );
            return temp;
        },{ _: [] })
        ._;

console.log(result);

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