Generate Treeview from Url in pure Javascript

Question

I am getting the Url of files in the form of array like below

and I want to achieve an object like this

var mainObj = [
{
    name: "Home",
    files: ["excel doc 1.xlsx", "excel doc 2.xlsx"],
    folders: [{
        name: "Procedure",
        files: ["excel doc 2.xlsx"],
        folders: []
    }],
},
{
    name: "BusinessUnits",
    files: [],
    folders:[
        {
            name:"Administration",
            files:[],
            folders:[{
                name: "AlKhorDocument",
                files: [],
                folders:[
                    {
                        name: "Album1",
                        files: [],
                        folders:[......]
                    }
                ]
            }]
        }
    ]
}

]

....... kindly let me know if you can help in it.

By the way I want to achieve like that below

If you can suggest better, then it would help me..

Yeah. I tried alot.. cannot share you all because I spend approx 3 days on achieving this. — Idexigner
– Idexigner, Commented Jan 13, 2020 at 17:41

Nina Scholz · Accepted Answer · 2020-01-13 14:51:37Z

2

By having only the path parts of the strings, you could reduce the array by reducing the folder structure and add the final file to the folder structure.

var data = ['Home/excel doc 1.xlsx', 'Home/excel doc 2.xlsx', 'Home/Procedure/excel doc', 'Home/Procedure/2.xlsx', 'BusinessUnits/Administration/AlKhorDocument/Album1/text.txt'],
    result = data.reduce((r, p) => {
        var path = p.split('/'),
            file = path.pop(),
            final = path.reduce((o, name) => {
                var temp = (o.folders = o.folders || []).find(q => q.name === name);
                if (!temp) o.folders.push(temp = { name });
                return temp;
            }, r);

        (final.files = final.files || []).push(file);
        return r;
    }, {});

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

edited Jan 13, 2020 at 14:51

answered Jan 13, 2020 at 13:50

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Idexigner Over a year ago

Thank you . you saved my life. It perfectly worked :) :) :)

SparkFountain · Accepted Answer · 2020-01-13 13:31:35Z

You need to perform some string parsing to split up the URL strings into different parts, gathering all information you need to create a tree-like structure.

Basically you could split all your URL strings into their sections and create the final data structure by analyzing all sub-sections of URL strings.

let urls = [
  'http://host.com/Performance/excel doc 1.xlsx',
  'http://host.com/BusinessUnits/Administration/AlKhorDocument/Album1/...',
  // ...
];

let result = [];

urls.forEach(url => {
  let relevantUrl = url.replace('http://host.com/', '');  // remove the unnecessary host name
  let sections = relevantUrl.split('/');  // get all string sections from the URL

  sections.forEach(section => {
    // check if that inner object already exists
    let innerObject = result.find(obj => obj.name === section);

    if(!innerObject) {
      // create an inner object for the section
      innerObject = {
        name: section,
        files: [],
        folders: []
      };
    }

    // add the current URL section (as object) to the result
    result.push(innerObject);
  });
});

What you still have to deal with is saving the current sub-level of your section object, which you can do either iteratively or by calling a recursive function.

Collectives™ on Stack Overflow

Generate Treeview from Url in pure Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related