将所有父节点的路径分配给树中的“这个”节点

Question

对于给定的输入

[
  { id: 1, path: 'foo/bar/1' },
  { id: 2, path: 'foo/bar/2' },
]

我生成了一个如下所示的树，它是由/分割的每条路径的树表示。

{
    "path": "foo",
    "children": [
        {
            "path": "bar",
            "children": [
                {
                    "path": "1",
                    "children": [],
                    "id": 1,
                    "nestingLevel": 2
                },
                {
                    "path": "2",
                    "children": [],
                    "id": 2,
                    "nestingLevel": 2
                }
            ],
            "nestingLevel": 1
        }
    ],
    "nestingLevel": 0
}

到目前为止，我有以下代码可以执行上述操作：

const inputArray = [
  { id: 1, path: 'foo/bar/1' },
  { id: 2, path: 'foo/bar/2' },
];

const result = [];
const level = { result };

// Produce the tree
for (p of inputArray) {
  let last;
  let { path, ...rest } = p;

  path.split('/').reduce((r, path, i, { length }) => {
    if (!r[path]) {
      r[path] = { result: [] };

      last = { path, children: r[path].result };

      r.result.push(last);
    }

    return r[path];
  }, level);
  Object.assign(last, rest);
}

// Walk the tree and assign nesting level (intended for UI stuff)
function traverse(obj, nestingLevel = 0) {
  if (obj !== null && typeof obj == 'object') {
    Object.entries(obj).forEach(([key, value]) => {
      value.nestingLevel = nestingLevel;
      traverse(
        value,
        // don't increment level if it's we're going over children []
        typeof value == 'object' && !Array.isArray(value) ? nestingLevel + 1 : nestingLevel
      );
    });
  }
}

traverse(result);
console.log(JSON.stringify(result[0], null, 4));

我想要做的（并且还无法弄清楚如何）是将完整的父路径（作为fullPath ）添加到每个节点，以便输出如下所示：

{
    "path": "foo",
    "fullPath": "foo",
    "children": [
        {
            "path": "bar",
            "fullPath": "foo/bar",
            "children": [
                {
                    "path": "1",
                    "fullPath": "foo/bar/1",
                    "children": [],
                    "id": 1,
                    "nestingLevel": 2
                },
                {
                    "path": "2",
                    "fullPath": "foo/bar/2",
                    "children": [],
                    "id": 2,
                    "nestingLevel": 2
                }
            ],
            "nestingLevel": 1
        }
    ],
    "nestingLevel": 0
}

有人愿意分享他们的想法吗？

Answer 1

您可以扩展您的 'traverse()' 函数，并添加累积路径。 每次下台时，添加另一部分。 在每个对象级别分配它。

你的遍历函数很酷被改成这样：

// Walk the tree and assign nesting level (intended for UI stuff)
function traverse(obj, nestingLevel = 0,fullp = "")
{
  if (obj !== null && typeof obj == 'object')
  {
    Object.entries(obj).forEach(([key, value]) => {
      value.nestingLevel = nestingLevel;
      if(typeof value == 'object' && !Array.isArray(value))
        traverse(value,nestingLevel+1,fullp);
      else{
        fp = fullp + "/" + obj.path;
        obj.fullPath = fp;
        traverse(value,nestingLevel,fp);
      }
    });
  }
}

那么结果是这样的：

{
    "path": "foo",
    "children": [
        {
            "path": "bar",
            "children": [
                {
                    "path": "1",
                    "children": [],
                    "id": 1,
                    "nestingLevel": 2,
                    "fullPath": "/foo/bar/1"
                },
                {
                    "path": "2",
                    "children": [],
                    "id": 2,
                    "nestingLevel": 2,
                    "fullPath": "/foo/bar/2"
                }
            ],
            "nestingLevel": 1,
            "fullPath": "/foo/bar"
        }
    ],
    "nestingLevel": 0,
    "fullPath": "/foo"
}