Como sugiere el título, tengo un objeto profundamente anidado.
Mi escenario es que mi conjunto de datos de origen es el objeto/configuración predeterminado de mi componente secundario. Ahora, cuando uno necesita usar en cualquier parte del proyecto, puede cambiar la configuración según sus necesidades.
Lo que estoy haciendo actualmente es difundir todo el objeto primero y luego cambiar el objeto necesario que sé que es una mala práctica. Necesito hacer que la configuración/objeto sea más flexible.
Desde el componente principal, uno solo enviará los valores que desea cambiar y dentro del componente secundario solo actualizaré los valores que se cambiaron y mantendré otras propiedades como están.
Mi conjunto de datos de origen:
sourceDataset = { height: 100, width: 100, showHint: { enable: true, format: 'test', }, primary: { title: 'Primary Title', style: { color: 'red', size: 24 } }, secondary: { title: 'Second Title', min: 0, max: 0, style: { color: 'blue', size: 54 } } }Ejemplo de tipo de objeto que podría recibir del componente principal
secondary = { height: 50, showHint: { enable: false }, primary: { title: 'Primary Title 2', style: { size: 45 } }, secondary: { style: { color: 'green' } } }Rendimiento esperado
result = { height: 50, // changed width: 100, showHint: { enable: false, // changed format: 'test', }, primary: { title: 'Primary Title 2', // changed style: { color: 'red', size: 45 // Changed } }, secondary: { title: 'Second Title', min: 0, max: 0, style: { color: 'green', // changed size: 54 } } }Parece que una forma de hacer esto es como se muestra a continuación, usando una función recursiva :
let sourceDataset = { height: 100, width: 100, showHint: { enable: true, format: 'test', }, primary: { title: 'Primary Title', style: { color: 'red', size: 24 } }, secondary: { title: 'Second Title', min: 0, max: 0, style: { color: 'blue', size: 54 } } }; let secondary = { height: 50, showHint: { enable: false }, primary: { title: 'Primary Title 2', style: { size: 45 } }, secondary: { style: { color: 'green' }, info: { text:"lorem ipsum" } } } function callRecursiveAgain(sourceKey,changedDataKey){ if(sourceKey && changedDataKey && typeof sourceKey == "object" && typeof changedDataKey == "object" && !Array.isArray(sourceKey) && !Array.isArray(changedDataKey) && Object.keys(changedDataKey).length>0 && Object.keys(sourceKey).length>0 ){ return true; } return false; } function replaceChangesRecursively(source,changedData){ Object.keys(changedData)?.map(key=>{ if(callRecursiveAgain(source[key],changedData[key])){ replaceChangesRecursively(source[key],changedData[key]); } else{ source[key] = changedData[key]; console.log(`${key} ---> changed`); } }) } replaceChangesRecursively(sourceDataset,secondary); console.log(sourceDataset); //newSouceDataset