Tengo datos que están estructurados de la siguiente manera:
const arr = [{ id: 0, name: 'Biomes', icon: 'mdi-image-filter-hdr', isParent: true, children: [{ id: 1, name: 'Redwood forest', icon: 'mdi-image-filter-hdr' }] },{ id: 2, name: 'Trees', icon: 'mdi-pine-tree', children: [{ id: 8, name: 'Redwood', icon: 'mdi-pine-tree' }] }]; El nivel superior es una matriz de objetos, y cada objeto puede tener un campo secundario children que, a su vez, puede ser una matriz de objetos. Si conozco el valor de id , ¿cómo puedo encontrar el objeto (o, lo que es más importante, el nombre del objeto), en función de ese valor de id?
Puede usar la recursividad aquí para obtener el objeto sin importar qué tan profundo sea. He filtrado el objeto. Solo le dará propiedad al objeto sin children . Puedes incluirlo de la forma que quieras
function getObjectFromId(arr, id) { for (let i = 0; i < arr.length; ++i) { if (arr[i].id === id) { // return arr[i] // If you want full object with children const { children, ...rest } = arr[i]; return rest; } if (arr[i].children) { const result = getObjectFromId(arr[i].children, id); if (result) return result; } } } const arr = [ { id: 0, name: "Biomes", icon: "mdi-image-filter-hdr", isParent: true, children: [ { id: 1, name: "Redwood forest", icon: "mdi-image-filter-hdr", }, ], }, { id: 2, name: "Trees", icon: "mdi-pine-tree", children: [ { id: 8, name: "Redwood", icon: "mdi-pine-tree", children: [ { id: 9, name: "Redwood", icon: "mdi-pine-tree", }, ], }, ], }, ]; function getObjectFromId(arr, id) { for (let i = 0; i < arr.length; ++i) { if (arr[i].id === id) { // return arr[i] // If you want full object with children const { children, ...rest } = arr[i]; return rest; } if (arr[i].children) { const result = getObjectFromId(arr[i].children, id); if (result) return result; } } } console.log(getObjectFromId(arr, 1)); console.log(getObjectFromId(arr, 8)); console.log(getObjectFromId(arr, 9)); /* This is not a part of answer. It is just to give the output fill height. So IGNORE IT */ .as-console-wrapper { max-height: 100% !important; top: 0; } const arr = [{ id: 0, name: 'Biomes', icon: 'mdi-image-filter-hdr', isParent: true, children: [{ id: 1, name: 'Redwood forest', icon: 'mdi-image-filter-hdr' }] },{ id: 2, name: 'Trees', icon: 'mdi-pine-tree', children: [{ id: 0, name: 'whatever', icon: 'new-tree' },{ id: 8, name: 'Redwood', icon: 'mdi-pine-tree' }] }]; const findById = (id) => arr .filter(x => x.id === id || x.children.some(child => id === child.id)) .map(y => ({...y, children: y.children.filter(child => id === child.id)})) console.log(findById(0)) Primero puede filter a todos los padres que tienen la misma id o si el padre tiene un hijo con la misma identificación a través de some , que luego usan el map y filter para eliminar a todos los niños que no tienen la id .
Solución 1: 2 para bucle.
const inputArray = [{ id: 0, name: 'Biomes', icon: 'mdi-image-filter-hdr', isParent: true, children: [{ id: 1, name: "Redwood forest", icon: 'mdi-image-filter-hdr' }] }, { id: 2, name: 'Trees', icon: 'mdi-pine-tree', children: [{ id: 8, name: "Redwood", icon: 'mdi-pine-tree', }] } ]; console.log(findById(8)); function findById(id) { for (const parent of inputArray) { if (parent.id === id) return parent; for (const child of parent.children) if (child.id === id) return child; } return null; }Solución 2: nivel anidado múltiple:
const inputArray = [{ id: 0, name: 'Biomes', icon: 'mdi-image-filter-hdr', isParent: true, children: [{ id: 1, name: "Redwood forest", icon: 'mdi-image-filter-hdr' }] }, { id: 2, name: 'Trees', icon: 'mdi-pine-tree', children: [{ id: 8, name: "Redwood", icon: 'mdi-pine-tree', children: [{ id: 12, name: "Test Level 2", icon: 'mdi-pine-tree', children: [{ id: 13, name: "Test Level 3", icon: 'mdi-pine-tree', }] }] }] } ]; console.log(findById(13, inputArray)); function findById(id, array) { for (const parent of array) { if (parent.id === id) return parent; if ('children' in parent) { const result = findById(id, parent.children); if (result) return result; } } return null; }