Typescript

Question

我想在 Angular 的树视图中显示数据，需要将 dot-notated 元素的数组转换为 objects 和 children 的集合。

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”，...）然后是下一级的children。一个元素可以有自己的值（“decimals”、“unitRef”、...），并且还可以有 children 以相同的方式组成。关卡数量没有限制。

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

Answer 1

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

在 myArray.split('.') returns 个数组的点拆分密钥。
现在遍历该数组并为每个元素创建一个 Object。

喜欢
bs.ass.fixAss

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

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

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

整个事情都可以用普通的 TypesScript 创建。我不知道有哪个库可以开箱即用地解决这个特定问题。

Answer 2

点对象库似乎无法处理您拥有的“子项”之类的东西，因此似乎需要自定义代码来构建您期望的内容

// 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);
})

应该是这样的

Typescript - Complex Object 与 Dot Notation 合并

Typescript - Complex Object merge with Dot Notation

javascript

lodash

angular