从包含Java脚本路径的对象列表中创建树

米克尔·格兰内罗

我想使用包含路径的对象列表来创建文件夹树。此解决方案仅适用于字符串（路径）列表，但我不知道如何使用对象使其工作。

    var paths = ["About.vue", "Categories/Index.vue", "Categories/Demo.vue", "Categories/Flavors.vue", "Categories/Types/Index.vue", "Categories/Types/Other.vue"],
            result = paths.reduce((r, p) => {
              var names = p.split("/");
              names.reduce((q, name) => {
                var temp = q.find(o => o.name === name);
                if (!temp) {
                  q.push((temp = { name, children: [] }));
                }
                return temp.children;
              }, r);
              return r;
            }, []);

            console.log(result)

我想做同样的事情，而不是使用包含路径的对象数组来使用路径数组。

从这样的数组中：

var paths = [{
  path: "/media",
  id: 9,
  name:"media"
},{
  path: "/media/folder1",
  id: 1,
  name:"folder1"
},{
  path: "/media/folder1/child",
  id: 3,
  name: "child"
},
{
  path: "/media/folder2",
  id: 2,
  name: "folder2"
}];

我想要这样的东西：

 [
  {
    "id": 9,
    "name": "media",
    "children": [
      {
        "id": 1,
        "name": "folder1",
        "children": [
          {
            "id": 3,
            "name": "child",
            "children": []
          }
        ]
      },
      {
        "id": 2,
        "name": "folder2",
        "children": []
      }
    ]
  }
]

亚历克斯·L

如果要使用给出的示例代码，只需更改一行：

const [root, ...names] = p.path.split("/");

并添加另一行：

const id = p.name == name ? p.id : undefined;

并更改最后一行：

q.push((temp = { id, name, children: [] }));

const paths = ["About.vue", "Categories/Index.vue", "Categories/Demo.vue", "Categories/Flavors.vue", "Categories/Types/Index.vue", "Categories/Types/Other.vue"];

const paths2 = [
  {
  path: "/media",
  id: 9,
  name:"media"
},{
  path: "/media/folder1",
  id: 1,
  name:"folder1"
},{
  path: "/media/folder1/child",
  id: 3,
  name: "child"
},
{
  path: "/media/folder2",
  id: 2,
  name: "folder2"
}];

const out1 = createTree(paths);
const out2 = createTree(paths2);

function createTree(input){
  const result = input.reduce((r, p, i) => {
    if (!(p instanceof Object)){
      p = {path: p, id: i};
    }
    const path = p.path && p.path.substr(0,1) == "/"
                ? p.path
                : "/" + p.path;
    const [root, ...names] = path.split("/");
    const last = names[names.length - 1];
    names.reduce((q, name) => {
      let temp = q.find(o => o.name === name);
      //const id = p.name == name ? p.id : undefined;
      const id = last == name ? p.id : undefined
      if (!temp) {
        q.push((temp = { id, name, children: [] }));
      }
      return temp.children;
    }, r);
    return r;
  }, []);
  console.log(result)
  return result;
}

输出：

[
  {
    "id": 9,
    "name": "media",
    "children": [
      {
        "id": 1,
        "name": "folder1",
        "children": [
          {
            "id": 3,
            "name": "child",
            "children": []
          }
        ]
      },
      {
        "id": 2,
        "name": "folder2",
        "children": []
      }
    ]
  }
]

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。