I have been trying to use a list of paths to implement a TreeView on a website with Material UI components.
I used the code found in the TreeView Component in MUI here https://mui.com/material-ui/react-tree-view/#rich-object
But I only have a list of paths like this:
dirs = ['path/to/file/file1.txt',
'path/to/file/file2.txt',
'path/to/another_file/file3.txt']
And I wanted to reach a structure that looks like this
{'path': {'to': {'files12': ['file1.txt',
'file2.txt']},
'file3': 'file3.txt'}
}
}
In order to use that with my function in React which I somehow got to work until it broke at the leaf node, because the dictionary I was using was the one created from here https://stackoverflow.com/a/58917078/9790150 which reads the leaf nodes forever and reached max call stack size.
Below is the best I could get my function inside my page to work
const renderTree= (my_dict) => (
<TreeItem key={Object.keys(my_dict)[0]} nodeId={Object.keys(my_dict)[0]} label ={Object.keys(my_dict)[0]}>
{Array.isArray(Object.values(my_dict))
? Object.entries(my_dict).map((node) => renderTree(node))
: null}
</TreeItem>
);
. Note: The above function is not complete. It's just where I've got until now.
I can provide further clarification as needed because I don't understand things fully myself yet.
So TL;DR
I either need a way to turn a list of paths into the structure format found in the TreeView example which looks like this:
const data = {
id: 'root',
name: 'Parent',
children: [
{
id: '1',
name: 'Child - 1',
},
{
id: '3',
name: 'Child - 3',
children: [
{
id: '4',
name: 'Child - 4',
},
],
},
],
};
Which feels too complicated to do in Python or Javascript since I can most likely make a function that works with the 2nd option ->
A way to turn it into a dictionary of dictionaries as shown above in my desired output
Any suggestions on how I should go about creating what I want in an easier manner are appreciated.