使用路径从dropbox api增量创建目录树

Question

我发现了一个问题，如何将文件路径转换为treeview?，但我不确定如何在JavaScript中获得所需的结果：

我正在尝试将路径数组转换为JSON树：

 var paths = [
        "/org/openbmc/UserManager/Group",
        "/org/stackExchange/StackOverflow",
        "/org/stackExchange/StackOverflow/Meta",
        "/org/stackExchange/Programmers",
        "/org/stackExchange/Philosophy",
        "/org/stackExchange/Religion/Christianity",
        "/org/openbmc/records/events",
        "/org/stackExchange/Religion/Hinduism",
        "/org/openbmc/HostServices",
        "/org/openbmc/UserManager/Users",
        "/org/openbmc/records/transactions",
        "/org/stackExchange/Religion/Islam",
        "/org/openbmc/UserManager/Groups",
        "/org/openbmc/NetworkManager/Interface"
    ];

我想要像下面这样的json结构，使用文件夹路径。

        var xyz = [{
            "path": "photos",
            "name": "photos",
            "children": [
              {
                "path": "photos/summer",
                "name": "summer",
                "children": [
                  {
                    "path": "photos/summer/june",
                    "name": "june",
                    "children": [
                      {
                        "path": "photos/summer/june/windsurf",
                        "name": "windsurf",
                      }
                    ]
                  }
                ]
              },
              {
                "path": "photos/winter",
                "name": "winter",
                "children": [
                  {
                    "path": "photos/winter/january",
                    "name": "january",
                    "children": [
                      {
                        "path": "photos/winter/january/ski",
                        "name": "ski",
                      },
                      {
                        "path": "photos/winter/january/snowboard",
                        "name": "snowboard",
                      }
                    ]
                  }
                ]
              }
            ]
    }];

我使用了下面的函数，但它不起作用

var parsePathArray = function(paths) {
var parsed = [];
for (var i = 0; i < paths.length; i++) {
    var position = parsed;
    var split = paths[i].split('/');
    for (var j = 0; j < split.length; j++) {
        if (split[j] !== "") {
            if (typeof position[split[j]] === 'undefined')
                position[split[j]] = {};
            position.children = [position[split[j]]];
            position.name = split[j];
            position = position[split[j]];

        }
    }
}
return parsed;
}

Answer 1

免责声明:我写这个答案是因为它是一个有趣的练习。我仍然对你感到失望，因为你没有尝试，也没有花时间解释什么是，你不理解...

我没有遵循您的确切格式，所以您必须尝试理解它是如何完成的，而不是复制代码然后离开:)

我将简要介绍每个步骤，以免冒险解释您已经知道的内容。

步骤1：

从字符串列表转到数组列表：

["a/1", "a/2", "b/1"] -> [["a", "1"], ["a", "2"], ["b", "1"]]

我们使用String.prototype.slice删除带有文件夹分隔符的前缀"/“和String.prototype.split，以将其转换为数组：path.split("/")

第二步

循环遍历每个文件夹，并将该文件夹添加到对象中。

[["a", "1"], ["a", "2"], ["b", "1"]] -> { a: { 1: {}, 2: {} }, b: { 1: {} } }

我们使用一个reducer，它使用括号表示法obj[key]访问对象，实例化新的文件夹对象，并在此过程中返回最深的位置。

第三步

递归循环对象的键并将其转换为指定的格式：

{ a: { 1: { } } -> { name: "a", path: [], children: [ /* ... */ ] }

我们使用Object.keys获取一个关键字列表，这些关键字是文件夹名称。递归调用每个嵌套的对象。

请更新您的答案与您有问题的具体步骤，允许其他人的帮助，以及我来描述更详细的步骤。

​

const pathStrings = ["/org/openbmc/UserManager/Group", "/org/stackExchange/StackOverflow", "/org/stackExchange/StackOverflow/Meta", "/org/stackExchange/Programmers", "/org/stackExchange/Philosophy", "/org/stackExchange/Religion/Christianity", "/org/openbmc/records/events", "/org/stackExchange/Religion/Hinduism", "/org/openbmc/HostServices", "/org/openbmc/UserManager/Users", "/org/openbmc/records/transactions", "/org/stackExchange/Religion/Islam", "/org/openbmc/UserManager/Groups", "/org/openbmc/NetworkManager/Interface"];

const paths = pathStrings
    .map(str => str.slice(1))       // remove first "/"
    .map(str => str.split("/"));

// Mutates map!
const mergePathInToMap = (map, path) => {
    path.reduce(
        (loc, folder) => (loc[folder] = loc[folder] || {}, loc[folder]),
        map      
    );

    return map;
};

// Folder structure as { folderName: folderContents }
const folderMap = paths.reduce(mergePathInToMap, {});

// Go from 
//   { folderName: folderContents }
// to a desired format like 
//   { name: folderName, children: [contents] }
const formatStructure = (folder, path) => {
    return Object
        .keys(folder)
        .map(k => ({ 
            name: k,
            path: path,
            children: formatStructure(folder[k], path.concat(k))
        }))
    
}

console.log(
    JSON.stringify(
        formatStructure(folderMap, []),
        null,
        2
    )
)

.as-console-wrapper { min-height: 100% }

​