Show object information in a directory listing format

Question

Show object information in a directory listing format

Struggling with the user interface while trying to replicate the functionality of an S3 bucket. My data is in JSON format:

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

Trying to use lodash to filter files based on a specified folder (e.g. folder2) and display all filenames within that folder along with any subfolders, excluding files. This will help me create the UI I need.

Expected result: testfile4.jpg, testfile5.jpg and folder3

I also need to distinguish between files and folders for UI presentation purposes. Any simpler solutions or suggestions?

Thanks, Sam

javascript json lodash

Answer 1

Answer №1

To find the first folder or file that starts with a specific string in the path, you can check if the path starts with the given string and then extract the first coming folder or file.

function extractParts(array, string) {
    return array
        .filter(obj => obj.path.startsWith(string))
        .map(obj => obj.path.match(/\/([^\/]+)/)[1]);
}

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" }];

console.log(extractParts(files, 'folder2'));

Answer 2

To find the first folder or file that starts with a specific string in the path, you can check if the path starts with the given string and then extract the first coming folder or file.

function extractParts(array, string) {
    return array
        .filter(obj => obj.path.startsWith(string))
        .map(obj => obj.path.match(/\/([^\/]+)/)[1]);
}

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" }];

console.log(extractParts(files, 'folder2'));

Answer 3

Answer №2

Here is a method to achieve this task:

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 4

Here is a method to achieve this task:

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 5

Answer №3

To extract only the file names from items in the array that have the term folder in their path, you'll need to filter the array first and then map the results to retrieve the file name.

An effective way to do this is by combining the .filter() and .map() methods as shown below:

    var output = files.filter(function(item){
       return item.path.includes("folder2");
    }).map(function(result){
        let regex = new RegExp('folder2\/([^\/]+)');
        let newPath = result.path.replace(regex, '$1');
        return newPath.lastIndexOf("/") > -1 ? newPath.substring(0, newPath.lastIndexOf("/")) : newPath;
    });

Example:

Here's a functional example demonstration:

var files = [{"name":"fileA", "path":"testfile1.jpg"},
{"name":"fileB", "path":"folder1/testfile2.jpg"},
{"name":"fileC", "path":"folder1/testfile3.jpg"},
{"name":"fileD", "path":"folder2/testfile4.jpg"},
{"name":"fileE", "path":"folder2/testfile5.jpg"},
{"name":"fileF", "path":"folder2/folder3/testfile6.jpg"}];


function getFileNamesFromFolder(folderName){
    return files.filter(function(data){
       return data.path.indexOf(folderName) == 0;
    }).map(function(result){
        let regex = new RegExp(folderName+'\/([^\/]+)');
        let newPath = result.path.replace(regex, '$1');
        return newPath.lastIndexOf("/") > -1 ? newPath.substring(0, newPath.lastIndexOf("/")) : newPath;
    });
}

console.log(getFileNamesFromFolder("folder2"));

Answer 6

To extract only the file names from items in the array that have the term folder in their path, you'll need to filter the array first and then map the results to retrieve the file name.

An effective way to do this is by combining the .filter() and .map() methods as shown below:

    var output = files.filter(function(item){
       return item.path.includes("folder2");
    }).map(function(result){
        let regex = new RegExp('folder2\/([^\/]+)');
        let newPath = result.path.replace(regex, '$1');
        return newPath.lastIndexOf("/") > -1 ? newPath.substring(0, newPath.lastIndexOf("/")) : newPath;
    });

Example:

Here's a functional example demonstration:

var files = [{"name":"fileA", "path":"testfile1.jpg"},
{"name":"fileB", "path":"folder1/testfile2.jpg"},
{"name":"fileC", "path":"folder1/testfile3.jpg"},
{"name":"fileD", "path":"folder2/testfile4.jpg"},
{"name":"fileE", "path":"folder2/testfile5.jpg"},
{"name":"fileF", "path":"folder2/folder3/testfile6.jpg"}];


function getFileNamesFromFolder(folderName){
    return files.filter(function(data){
       return data.path.indexOf(folderName) == 0;
    }).map(function(result){
        let regex = new RegExp(folderName+'\/([^\/]+)');
        let newPath = result.path.replace(regex, '$1');
        return newPath.lastIndexOf("/") > -1 ? newPath.substring(0, newPath.lastIndexOf("/")) : newPath;
    });
}

console.log(getFileNamesFromFolder("folder2"));

Show object information in a directory listing format

Answer №1

Answer №2

Answer №3

Similar questions

Coordinate Point Visualization in Three.js CameraHelper

Displaying an image gradually as the user moves down the page

Setting up initial values for React properties

Show the entire phrase within a Bootstrap modal with the help of jQuery, instead of just the initial

Ways to detect the scroll event on a scrollable container?

Leveraging highland.js for sequentially executing asynchronous functions while maintaining references to the initial stream data

The values returned by a NodeJS script in the Python shell are identical to those returned by Node

Export Python dictionary to a JSON format file

Steer clear of directly altering a prop within reusable components

Error: react-router v4 - browserHistory is not defined

GraphQL queries that are strongly-typed

The function $scope.$watch(var,function) was not defined and caused an error stating that

Uncovering data with the power of jQuery: Metadata

Tips on how to engage in a spontaneous audio experience

The HTTP response object in Express does not provide any data in its return

What is the best way to send unprocessed JSON strings to the DeployR WebAPI?

The mouse pointer adjusts according to the event

``Unusual padding for the body in VueJS and Nuxt, with a touch of CSS

Is it possible to read PDF files using Node.js without relying on external libraries?

What is the best way to create a jumping animation for an object in Cannon.js and Three.js?