Esto para Material UI Treeview. Estoy tratando de construir una función recursiva para construir dinámicamente el JSON a partir de dos matrices. La primera matriz es MainArray, que sería el punto de partida. La segunda matriz es la matriz de directorios.
El objetivo es emparejar los directorios obj con su padre en una nueva propiedad llamada SubDirectorios.
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: [] }]Lo que tengo sin recursividad...
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 ; };La salida final:
[{ 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: [] } ] }]Podría abordar esto usando Array.reduce .
Pase la matriz main original a la función de reduce y luego procese cada elemento en directories para adjuntarlo a main .
Retazo:
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);EDITAR: dado que los objetos en JavaScript se pasan por referencia, puede usarlo para su ventaja al reducir su lista original a un objeto { [id]: [object] } (para acceder a los padres 'inmediatamente') y luego filtrar para encontrar cualquier directorio raíz mientras rellena el atributo de files de su padre (si tiene uno).
Original
¿Por qué no fusionar ambas matrices con Array.concat y hacerlo con Array.reduce y simplemente filtrar cualquier directorio raíz para su tabla de árboles?
['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)Si tiene una lista plana de todos los directorios, puede iterar una vez.
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)