Novato aquí. Revise el siguiente fragmento de código y sugiera cómo lo escribiría de una manera más clara, porque como novato, todas mis formas son mucho más procedimentales, etc.
arr.map((p) => p.id === pId ? p.bList.map((b) => b.id === bId ? b.fList.map((f) => f.id === fId ? console.log('magic happens here') : f ) : b ) : p );No puse nombres reales a propósito, para que puedan ver lo ilegible que es y lo confuso que es entender lo que está pasando.
Actualización: estoy tratando de ejecutar una operación (obtener datos/modificar/eliminar, etc.) en una matriz anidada. Estoy usando Immer, por lo que en realidad no necesito encargarme de mutar los datos originales, por lo que no hay una razón específica para usar map() por ejemplo.
Update2: Aquí hay un ejemplo de la matriz que tengo:
const arr = [ { id: 123, // data, bList: [ { id: 24, // data, fList: [ { id: 51, // data, } ] } ] }, ] Entonces, en el ejemplo anterior, trato de modificar el objeto fList que coincide con la id 51
Deberías encadenarlo con una tubería. Por ejemplo como este:
arr .filter(p => p.id === pId) .flatMap(p => p.bList) .filter(b => b.id === bId) .forEach(elm => console.log(elm))Si lo hice bien, desea modificar un objeto profundamente anidado en su matriz. En este caso, puede encadenar una serie de Array.prototype.find() utilizando el encadenamiento opcional ( ?. ) y hacer algo como:
const itemToUpdate = arr.find(p => p.id === pId)?. bList.find(b => b.id === bId)?. fList.find(f => f.id === fId) if (itemToUpdate) { console.log('magic happens here') }Manifestación:
const arr = [{ id: 'foo', bList: [{ id: 'bar', fList: [{ id: 'baz', key: 'value' }, { id: 'baz2', key: 'value' } ] }] }, { id: 'goo', bList: [{ id: 'car', fList: [{ id: 'caz', key: 'value' }, { id: 'caz2', key: 'value' } ] }] } ] const pId = 'foo'; const bId = 'bar'; const fId = 'baz'; const itemToUpdate = arr.find(p => p.id === pId)?. bList.find(b => b.id === bId)?. fList.find(f => f.id === fId); if (itemToUpdate) { itemToUpdate.key = 'new value' } console.log(arr);