如何将扁平数据结构转换为树形结构?

3

假设我有两个帮助函数,将平面的{}数组转换为树形结构。考虑以下平面数据:

const data = [
     {
            "ID": 1,
            "Tier_1": "DataSource1",
            "Tier_2": "Area",
            "Tier_3": "General",
        },
        {
            "ID": 2,
            "Tier_1": "DataSource1",
            "Tier_2": "Financial",
            "Tier_3": "General",
        },
        {
            "ID": 3,
            "Tier_1": "DataSource1",
            "Tier_2": "Area",
            "Tier_3": "General",
        },
        {
            "ID": 4,
            "Tier_1": "DataSource2",
            "Tier_2": "Area",
            "Tier_3": "General",
        },
        {
            "ID": 5,
            "Tier_1": "DataSource2",
            "Tier_2": "Area",
            "Tier_3": "Management Plan",
        }
]

数据包含三行层次信息,我想将其转换为类似树形结构的形式,如下所示(预期输出):
(最后的子级是实际的数据库对象,但分布在树上)
const output = {
  "DataSource1: {
    "Area": {
        {
            "ID": 1,
            "Tier_1": "DataSource1",
            "Tier_2": "Area",
            "Tier_3": "General",
        },
        {
            "ID": 3,
            "Tier_1": "DataSource1",
            "Tier_2": "Area",
            "Tier_3": "General",
        },
      },
      "Financial": [
        {
            "ID": 2,
            "Tier_1": "DataSource1",
            "Tier_2": "Financial",
            "Tier_3": "General",
        },
      ]
  },
  "DataSource2: {
      "Area": [
          {
            "ID": 4,
            "Tier_1": "DataSource2",
            "Tier_2": "Area",
            "Tier_3": "General",
          },
          {
            "ID": 5,
            "Tier_1": "DataSource2",
            "Tier_2": "Area",
            "Tier_3": "Management Plan",
          }
       ]
      }
  }
}

我实际上成功创建了函数来实现此目标,但它们不够灵活(深度/维度是固定的,并在每个函数名称中说明)。

返回二维树的函数:

const getDataCategoriesTwoDim = (data, mainCategory) => {
  const dataFields = [...data];
  let map = {};

  for (let i = 0; i < dataFields.length; i += 1) {
    const currentField = dataFields[i];
    const currentCategory = currentField[mainCategory];

    if (!map[currentCategory]) {
      map[currentCategory] = [];
    }
    map[currentCategory].push(currentField);
  }

  return map;
};

返回三维树的函数:

const getDataCategoriesThreeDim = (data, mainCategory, subCategory) => { // DIFF
  const dataFields = [...data];
  let map = {};

  for (let i = 0; i < dataFields.length; i += 1) {
    const currentField = dataFields[i];
    const currentCategory = currentField[mainCategory];
    const currentSubcategory = currentField[subCategory]; // DIFF

    if (!map[currentCategory]) {
      map[currentCategory] = {}; /DIFF
    }
    if (!map[currentCategory][currentSubcategory]) { // DIFF
      map[currentCategory][currentSubcategory] = []; // DIFF
    } // DIFF
    map[currentCategory][currentSubcategory].push(currentField); // DIFF
  }

  return map;
};

您可以像这样调用两者并获得预期结果:
  getDataCategoriesTwoDim(data, 'Tier_2');
  getDataCategoriesThreeDim(data, 'Tier_2', 'Tier_3');

如您所见,代码重复和复制粘贴非常常见。我在注释中标记了不同之处。我如何将代码重写为一个函数,以便可以设置2、3或更多维度?

1个回答

4

您可以使用嵌套属性的键,并将最后一个键添加为数组,而不是对象。然后将该对象推入嵌套数组中。

const
    groupBy = (data, keys) => data.reduce((r, o) => {
        keys
            .reduce((p, k, i, a) =>
                 p[o[k]] = p[o[k]] || (i + 1 === a.length ? [] : {}), r)
            .push(o);
        return r;
    }, Object.create(null)),
    data = [{ ID: 1, Tier_1: "DataSource1", Tier_2: "Area", Tier_3: "General" }, { ID: 2, Tier_1: "DataSource1", Tier_2: "Financial", Tier_3: "General" }, { ID: 3, Tier_1: "DataSource1", Tier_2: "Area", Tier_3: "General" }, { ID: 4, Tier_1: "DataSource2", Tier_2: "Area", Tier_3: "General" }, { ID: 5, Tier_1: "DataSource2", Tier_2: "Area", Tier_3: "Management Plan" }],
    result1 = groupBy(data, ["Tier_1", "Tier_2"]),
    result2 = groupBy(data, ["Tier_1", "Tier_2", "Tier_3"]);

console.log(result1);
console.log(result2);
.as-console-wrapper { max-height: 100% !important; top: 0; }


嘿,尼娜!简短而优雅,非常棒。谢谢你。 - Rafał Bagrowski
@Nina,感谢您的回答。是否可以在DataSource之外添加另一个键? 例如:{name: "DataSource1, subItems : [ { name: "Area", subItems : [ ... ] } ] } 基本上是一个带有属性名称的对象数组? - Jithin Joseph

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接