Question

我试图反映S3存储桶的工作方式，并且我正在努力学习用户界面。所以我有一堆json如下

{"name":"sams file", "path":"testfile1.jpg"},
{"name":"sams file", "path":"folder1/testfile2.jpg"},
{"name":"sams file", "path":"folder1/testfile3.jpg"},
{"name":"sams file", "path":"folder2/testfile4.jpg"},
{"name":"sams file", "path":"folder2/testfile5.jpg"},
{"name":"sams file", "path":"folder2/folder3/testfile6.jpg"},

现在我想通过说lodash一个值即folder2，我希望它返回该文件夹中的所有文件名及其包含的任何文件夹（不是文件）所以我可以构建一个UI，所以我基本上寻找一个

的数组

testfile4.jpg, testfile5.jpg and folder3

然后，我应该能够检查该项目是文件还是文件夹，并将ui呈现给用户

这听起来有可能，有人会建议一种更容易实现我想要的方式吗？

谢谢Sam

Answer 1

你可以通过以下方式完成

let arr = [
{"name":"sams file", "path":"testfile1.jpg"},
{"name":"sams file", "path":"folder1/testfile2.jpg"},
{"name":"sams file", "path":"folder1/testfile3.jpg"},
{"name":"sams file", "path":"folder2/testfile4.jpg"},
{"name":"sams file", "path":"folder2/testfile5.jpg"},
{"name":"sams file", "path":"folder2/folder3/testfile6.jpg"}
];

let input_folder = 'folder2';

let result = arr.reduce((a, b) => {
    a['files'] = a['files'] || [];
    a['folders'] = a['folders'] || [];
    let re = new RegExp(input_folder + '\/([^/]+)');
    let matches = b.path.match(re);
    if(matches != null){
        if(matches[1].match(/\./)){
            a['files'].push(matches[1]);
        }
        else {
            a['folders'].push(matches[1]);
        }
    }
    return a;
}, {});

console.log(result);

Answer 2

您需要过滤数组以获取其路径中包含此folder的所有项目，然后map这些结果只保留文件名。

您可以使用.filter()和.map()方法的组合，如下所示：

    var results = files.filter(function(f){
       return f.path.indexOf("folder2")>-1;
    }).map(function(r){
        let reg = new RegExp('folder2\/([^\/]+)');
        let path = r.path.replace(reg, '$1');
        return path.lastIndexOf("/") > - 1 ? path.substring(0, path.lastIndexOf("/")) : path;
    });

<强>演示：

这是一个有效的演示：

＆＃13;

var files = [{"name":"sams file", "path":"testfile1.jpg"},
{"name":"sams file", "path":"folder1/testfile2.jpg"},
{"name":"sams file", "path":"folder1/testfile3.jpg"},
{"name":"sams file", "path":"folder2/testfile4.jpg"},
{"name":"sams file", "path":"folder2/testfile5.jpg"},
{"name":"sams file", "path":"folder2/folder3/testfile6.jpg"}];


function getFilesFolder(folder){
    return files.filter(function(f){
       return f.path.indexOf(folder) == 0;
    }).map(function(r){
        let reg = new RegExp(folder+'\/([^\/]+)');
        let path = r.path.replace(reg, '$1');
        return path.lastIndexOf("/") > - 1 ? path.substring(0, path.lastIndexOf("/")) : path;
    });
}

console.log(getFilesFolder("folder2"));

＆＃13;

Answer 3

您可以检查路径，如果它以给定字符串开头，然后映射第一个即将到来的文件夹或文件。

function getParts(array, string) {
    return array
        .filter(o => o.path.startsWith(string))
        .map(o => o.path.match(/\/([^\/]+)/)[1]);
}

var data = [{ name: "sams file", path: "testfile1.jpg" }, { name: "sams file", path: "folder1/testfile2.jpg" }, { name: "sams file", path: "folder1/testfile3.jpg" }, { name: "sams file", path: "folder2/testfile4.jpg" }, { name: "sams file", path: "folder2/testfile5.jpg" }, { name: "sams file", path: "folder2/folder3/testfile6.jpg" }];

console.log(getParts(data, 'folder2'));

js列出对象的路径信息

3 个答案: