This for Material UI Treeview. I am trying to build a recursive function to dynamically build out the JSON from two arrays. The first array is the MainArray which would be the starting point. The second array is the directories array.
The goal is to pair the directories obj's to its parent in a new property named SubDirectories.
const mainArray = [{
Id: 1,
Name: "test",
SubDirectoryCount: 10,
Files: []
}]
const directories = [{
Id: 56,
Name: "Client 2",
SubDirectoryCount: 1,
ParentId: 1,
Files: []
}, {
Id: 53,
Name: "Client 3",
SubDirectoryCount: 1,
ParentId: 1,
Files: []
},
{
Id: 50,
Name: "Client 4",
SubDirectoryCount: 1,
ParentId: 1,
Files: []
},
{
Id: 48,
Name: "Client 5",
SubDirectoryCount: 1,
ParentId: 53,
Files: []
},
{
Id: 47,
Name: "Client 5",
SubDirectoryCount: 1,
ParentId: 53,
Files: []
},
{
Id: 47,
Name: "Client 5",
SubDirectoryCount: 1,
ParentId: 53,
Files: []
}]
What I have without recursion...
export const createTreeData = ( mainArray , directories ) => {
for (let idx in mainArray) {
if (directories ) {
const directoriesList = [];
directories.map((dir) => {
if (mainArray.Id === dir.ParentId) {
directoriesList.push(dir);
}
});
mainArray.SubDirectories = directories;
}
}
return mainArray ;
};
The final output:
[{
Id: 1,
Name: "test",
SubDirectoryCount: 10,
Files: []
*SubDirectories: [{
Id: 56,
Name: "Client 2",
SubDirectoryCount: 1,
ParentId: 1,
Files: []
},{
Id: 53,
Name: "Client 3",
SubDirectoryCount: 1,
ParentId: 1,
Files: [],
*SubDirectories:[{
Id: 48,
Name: "Client 5",
SubDirectoryCount: 1,
ParentId: 53,
Files: []
},
{
Id: 47,
Name: "Client 5",
SubDirectoryCount: 1,
ParentId: 53,
Files: []
},
{
Id: 47,
Name: "Client 5",
SubDirectoryCount: 1,
ParentId: 53,
Files: []
}]},
{
Id: 50,
Name: "Client 4",
SubDirectoryCount: 1,
ParentId: 1,
Files: []
}
]
}]
You could tackle this using Array.reduce.
Pass in the original main array to the reduce function and then process each element in directories to attach it to main.
Snippet:
const mainArray = [{
Id: 1,
Name: "test",
SubDirectoryCount: 10,
Files: []
}];
const directories = [{
Id: 56,
Name: "Client 2",
SubDirectoryCount: 1,
ParentId: 1,
Files: []
},
{
Id: 53,
Name: "Client 3",
SubDirectoryCount: 1,
ParentId: 1,
Files: []
},
{
Id: 50,
Name: "Client 4",
SubDirectoryCount: 1,
ParentId: 1,
Files: []
},
{
Id: 48,
Name: "Client 5",
SubDirectoryCount: 1,
ParentId: 53,
Files: []
},
{
Id: 47,
Name: "Client 5",
SubDirectoryCount: 1,
ParentId: 53,
Files: []
},
{
Id: 49,
Name: "Client 5",
SubDirectoryCount: 1,
ParentId: 53,
Files: []
},
{
Id: 47,
Name: "Client 5",
SubDirectoryCount: 1,
ParentId: 49,
Files: []
}
];
const search = (data, parentId) => {
for (let i = 0; i < data.length; i++) {
if (data[i].Id === parentId) {
return data[i];
}
if (data[i].SubDirectories) {
return search(data[i].SubDirectories, parentId);
}
}
};
const final = directories.reduce((previousValue, currentValue) => {
const parent = search(previousValue, currentValue.ParentId);
parent.SubDirectories = parent.SubDirectories || [];
parent.SubDirectories.push(currentValue);
return previousValue;
}, mainArray);
console.info(final);EDIT: Since objects in JavaScript are passed by reference you could use it to your advantage reducing your original list into a object { [id]: [object] } (to access parent 'immediately') then filtering to find any root directory while populating the files attribute of your parent (if have one).
Original
Why not merging both arrays with Array.concat and do it with Array.reduce and just filtering any root directory for your treetable
['aaa', 'bb'].concat(['ab', 'bc'])
> Array(4) [ "aaa", "bb", "ab", "bc" ]
const directories = [
{
Id: 1,
Name: 'test'
},
{
Id: 56,
Name: 'Client 2',
ParentId: 1
},
{
Id: 53,
Name: 'Client 3',
ParentId: 1
},
{
Id: 50,
Name: 'Client 4',
ParentId: 1
},
{
Id: 48,
Name: 'Client 5',
ParentId: 53
},
{
Id: 47,
Name: 'Client 5',
ParentId: 53
},
{
Id: 47,
Name: 'Client 5',
ParentId: 53
}
]
const files = directories.reduce((acc, cur) => {
acc[cur.Id] = cur
return acc
}, {})
const rootDir = directories.filter((dir) => {
if (dir.ParentId) {
if (!files[dir.ParentId].dirs) {
files[dir.ParentId].dirs = []
}
files[dir.ParentId].dirs.push(dir)
return false
}
return true
})
console.log(rootDir)If you have one flat list of all directories, you can iterate once.
const mainArray = [{Id:1,Name:"test",SubDirectoryCount:10,Files:[]}];
const directories = [{Id:56,Name:"Client 2",SubDirectoryCount:1,ParentId:1,Files:[]},{Id:53,Name:"Client 3",SubDirectoryCount:1,ParentId:1,Files:[]},{Id:50,Name:"Client 4",SubDirectoryCount:1,ParentId:1,Files:[]},{Id:48,Name:"Client 5",SubDirectoryCount:1,ParentId:53,Files:[]},{Id:47,Name:"Client 5",SubDirectoryCount:1,ParentId:53,Files:[]},{Id:49,Name:"Client 5",SubDirectoryCount:1,ParentId:53,Files:[]}];
// create flat list
const tmp = mainArray.concat(directories);
tmp.forEach(directory => {
const parent = tmp.find(item => item.Id === directory.ParentId);
if(parent) {
parent.SubDirectories = parent.SubDirectories || [];
parent.SubDirectories.push(directory)
}
});
console.log(mainArray)