Typescript - 复杂对象与点符号合并答案

【问题标题】：Typescript - Complex Object merge with Dot NotationTypescript - 复杂对象与点符号合并
【发布时间】：2021-06-25 12:33:13
【问题描述】：

我想在 Angular 的树视图中显示数据，并且需要将点标记元素数组转换为具有子对象的集合。

This 是我正在使用的数组。注意每个元素中的 key 字段。

所以我需要的结构是例如（对于数组中的前 4 个元素）：

    const data = [
    {
        key: 'bs',
        children: [
            {
                key: 'ass',
                children: [
                    {
                        key: 'fixAss',
                        decimals: '0',
                        unitRef: 'unit_euro',
                        contextRef: 'period_2019',
                        value: 15542000,
                        children: [
                            {
                                key: 'intan',
                                decimals: '0',
                                unitRef: 'unit_euro',
                                contextRef: 'period_2019',
                                value: 8536000,
                                children: [
                                    {
                                        key: 'concessionBrands',
                                        decimals: '0',
                                        unitRef: 'unit_euro',
                                        contextRef: 'period_2019',
                                        value: 8536000,
                                        children: [] // If there are no children in the element this can be empty or left out
                                    }
                                ]
                            },
                            {
                                key: 'tan',
                                decimals: '0',
                                unitRef: 'unit_euro',
                                contextRef: 'period_2019',
                                value: 6890000,
                                children: []
                            }
                        ]
                    }
                ]
            }
        ]
    }
];

这意味着元素通过 key 属性组合在一起，该属性包含该级别的符号（即“bs”、“ass”、“fixAss”……），然后是下一级。一个元素可以有自己的值（“decimals”、“unitRef”、...），并且还可能有以相同方式构成的子元素。可以拥有的关卡数量没有限制。

我的 package.json 中有 lodash 和 dot object 库。非常感谢任何帮助。

【问题讨论】：

我不明白你想达到什么目的，你能举个例子吗？
我从我们的后端得到这个 pastebin.com/A5QyBkLm 数组。我想将该数据转换为您可以在帖子中的代码示例中看到的形式。

标签： javascript angular typescript lodash

【解决方案1】：

似乎 dot-object lib 无法与您拥有的“孩子”之类的东西一起使用，因此似乎需要自定义代码来构建您所期望的内容

// balanceData got somehow

let data = [];
const getOrBuildPathObject = (path) => {
   let currentLevel = data;
   let obj = null;
   for(let keyFragment of path.split('.')) {
      obj = currentLevel.find(v => v.key == keyFragment);
      if(!obj) {
        obj = {key: keyFragment, children: []};
        currentLevel.push(obj);
      }
      currentLevel = obj.children;
   }
   return obj;
}

balanceData.forEach((d) => {
  let {key, ...data} = d;
  Object.assign(getOrBuildPathObject(key), data);
})

应该是这样的

【讨论】：

这行得通。谢谢你。我整个上午都在想这个-.-
它从一开始就没有任何修改就可以工作吗？我根本没有测试它
是的，它完美无缺。 IDE 只是抱怨 {key, ...data} 部分中的阴影变量。

【解决方案2】：

我会遍历数组并检查每个键。

在点处拆分键 myArray.split('.') 返回一个数组。
现在遍历该数组并为每个元素创建一个对象。

点赞
bs.ass.fixAss

检查是否存在根元素bs。
- 如果不是，则创建一个（空）bs 元素。
检查ass 元素是否是bs 的子元素
- 如果否，则创建一个（空）ass 元素
检查（空）fixAss 元素是否存在。
- 如果不是，则创建带有值的fixAss 元素并将其作为子元素添加到ass 元素中
- 如果是，请填写值

如果它保证数据总是按正确的顺序排列（这意味着bs.ass.fixAss 总是在bs.ass 之后），那么您可以跳过检查。

我会为孩子使用 HashMap（而不是数组），因为这样可以更轻松地穿过树
myTrees[bs].children[ass].children[fixAss]

整个东西都可以用普通的 TypesScript 创建。我不知道有什么图书馆可以开箱即用地解决这个特定问题。

【讨论】：