将平面数据转换为 3 级 hierarchy/tree

Question

我目前正在将我的平面数据转换为具有 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
        }));

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

这是我使用树结构的 fiddle：http://jsfiddle.net/zt4nhxcw/3/

我在这里开始了一个新的 fiddle，其中包含新的品牌数据：http://jsfiddle.net/t1uz85b2/

目标是添加第 3 级。因此，第 2 层的每个 child 下方都会有 Brand。

这里是数据输入方式的一个非常小的片段：

[
  {
    "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",
      "PBNA",
      "PEPSI",
      478704.02999999974,
      392746.69999999995,
      533557.0000000006,
      457008.0000000001
    ],
    "hints": {
      "index": 4
    }
  },
  {
    "items": [
      "Energy",
      "RED BULL NORTH AMERICA",
      "RED BULL EDITIONS",
      449618.55000000016,
      328150.8999999997,
      162428.9999999999,
      117521.00000000001
    ],
    "hints": {
      "index": 5
    }
  },
  {
    "items": [
      "SSD",
      "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
          }
        ]
      }
    ]
  }
]

Answer 1

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

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", "PBNA", "PEPSI", 478704.02999999974, 392746.69999999995, 533557.0000000006, 457008.0000000001], hints: { index: 4 } }, { items: ["Energy", "RED BULL NORTH AMERICA", "RED BULL EDITIONS", 449618.55000000016, 328150.8999999997, 162428.9999999999, 117521.00000000001], hints: { index: 5 } }, { items: ["SSD", "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, k, i) => (o[k] = items[i + limit], o), {})
                );
            return temp;
        }, { _: [] })
        ._;

console.log(result);

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

将平面数据转换为 3 级 hierarchy/tree

Convert flat data to 3 level hierarchy/tree

javascript

tree

hierarchy

treetable

ecmascript-6