0

Tengo que buscar una clave en un objeto multidimensional y actualizar sus datos, pero sin implementar la recursividad o loop por mas de un nivel:

este es mi escenario, tengo 2 objetos A y B; A es el original.
B es el objeto que debería usar para actualizar A

Nota: el Objeto B contiene un esquema de (llave a buscar):(dato de remplazo) por lo tanto puede ser algo así {nodo1,nodo2,nodo3,nodo4} y no precisamente pueden estar en el mismo nivel, por eso implemento solo un forEach en mi código. pero dentro de el debe ser una búsqueda como find() cuando se buscan elementos HTML, pero no logro encontrar que implementar, con objetos de javascript.

la siguiente estructura y agrego el ejemplo de lo que he intentado:

let objA = {};
objA.openend = false;
objA.url = {};
objA.url.url1 = {normal:'black',visited:'blue',closed:'red'};
objA.url.url2 = {normal:'black',visited:'blue',closed:'red'};
objA.url.url3 = {normal:'black',visited:'blue',closed:'red'};


let objB ={openend:true,url2:{normal:'yellow',visited:'marron',closed:'green'}};


let properties = Object.keys(objB);


properties.forEach(key => {
  //aqui en lugar de una sustitucion deberian emplear una busqueda y reemplazo.
  //hasta ahora solo se aplicar el remplazo
  objA[key]=objB[key];
});

console.log(objA);

como verán el problema es que no remplaza el segundo objeto, en lugar de eso lo agrega. me hace falta implementar algo que en lugar de hacer una sustitución directa encuentre la llave para realizar la sustitución y no una basada en llaves directas.

ejemplo del ouput esperado:

{
  "openend": true,
  "url": {
    "url1": {
      "normal": "black",
      "visited": "blue",
      "closed": "red"
    },
    "url2": {
      "normal": "yellow",
      "visited": "marron",
      "closed": "green"
    },
    "url3": {
      "normal": "black",
      "visited": "blue",
      "closed": "red"
    }
  },
}

Update: otro intento con recursividad // quiero evitarlo: igual no me funciono me retorno el objeto sin modificaciones en los subnodos

let objA = {};
objA.opened = false;
objA.url = {};
objA.url.url1 = {normal:'black',visited:'blue',closed:'red'};
objA.url.url2 = {normal:'black',visited:'blue',closed:'red'};
objA.url.url3 = {normal:'black',visited:'blue',closed:'red'};

let objB ={opened:true,url2:{normal:'yellow',visited:'marron',closed:'green'}};

    function replaceSetting(objA,objB){
        let replace = Object.keys(objB);
        let original = Object.keys(objA);

        replace.forEach(key1 => {
            original.forEach(key2 => {
                if(typeof objA[key1]!=='undefined'){
                    objA[key1] = objB[key1];
                }else{
                    if(typeof objA[key2] === 'object' && Object.keys(objA[key2]).length !== 0){
                        objA[key2] = replaceSetting(objA[key2],objB[key1]);
                    }
                }
            });
        });
        return objA;
    }

objA = replaceSetting(objA,objB);

console.log(objA);

5
  • ¿Entonces de acuerdo a la propeidad url tiene que reemplazar el objecto que haga coincidencia dentro de obj a?
    – Ivandez
    el 31 oct. 2021 a las 21:52
  • si algo así XD por ejemplo el objetoB solo tiene url2; este debe encontrar y remplazarse en el objetoA.
    – user46896
    el 31 oct. 2021 a las 21:53
  • @Ivandez aunque ya lo he resuelto; por algun motivo me cambia de orden las propiedades...
    – user46896
    el 31 oct. 2021 a las 22:01
  • de nada ya casi lo conseguia xD es divertido hacer este tipo de ejercios
    – Ivandez
    el 31 oct. 2021 a las 22:05
  • @Ivandez la verdad que si ya publique mi opción, si puedes refactorizar el código y mejorarlo seria bienvenido; la verdad buscaba evitar usar recursividad en funciones pero no puede...
    – user46896
    el 31 oct. 2021 a las 22:08

2 respuestas 2

1

Te adjunto resolución usando un simple reduce y con un solo nivel como requieres. La mayor dificultad en tu código es que recorres B cuando en realidad es más fácil recorriendo A.

let objA = {};
objA.openend = false;
objA.url = {};
objA.url.url1 = {normal:'black',visited:'blue',closed:'red'};
objA.url.url2 = {normal:'black',visited:'blue',closed:'red'};
objA.url.url3 = {normal:'black',visited:'blue',closed:'red'};


let objB ={openend:true,url2:{normal:'yellow',visited:'marron',closed:'green'}};

let properties = Object.keys(objA.url);

objA.url = properties.reduce((acc,key) => {
  acc[key] = objB[key] ? objB[key]: objA.url[key]
  return acc
},{});
objA.openend = objB.openend ? objB.openend: objA.openend

console.log(objA);

Si ocupas una función que reciba A y B y devuelva el remplazo acá está el código refactorizado. Como se realizan copias internas de los objetos y se definen de manera interna en el scope de la función no se modifican los objetos originales pasados por parámetro:

const replace = (A, B) =>{
  let objA = {...A}
  let objB = {...B}
  
  let properties = Object.keys(objA.url);

  objA.url = properties.reduce((acc,key) => {
    acc[key] = objB[key] ? objB[key]: objA.url[key]
    return acc
  },{});

  objA.openend = objB.openend ? objB.openend: objA.openend
   
  return objA
}

Si buscas algo más genérico que actualice todas las propiedades de primer nivel de A con las de B, puedes usar lo siguiente. Así cualquier propiedad de A que esté en B será remplazada:

const replace = (A, B) =>{
  let objA = {...A}
  let objB = {...B}

  let properties = Object.keys(objA.url);

  //Remplaza las url
  objA.url = properties.reduce((acc,key) => {
    acc[key] = objB[key] ? objB[key]: objA.url[key]
    return acc
  },{});

  //Remplaza las propiedades de primer nivel
  objA = Object.keys(objA).reduce((acc,key) => {
    acc[key] = objB[key] ? objB[key]: objA[key]
    return acc
  },{});

  return objA
}
7
  • ya lo revice pero la primera propiedad tambien debe actualizarla.... y en tu version no lo hace...
    – user46896
    el 31 oct. 2021 a las 22:38
  • disculpa si esa parte no se entendio.
    – user46896
    el 31 oct. 2021 a las 22:39
  • Ntp, lo modifico en enseguida. el 31 oct. 2021 a las 22:41
  • Ya quedó, realmente objA.openend de la manera en que la tienes declarada no hace falta ni recorrer el ciclo, puedes actualizarla directamente. Un poco extraño, porque imagino openend se refiera a una url que fue visitada por lo que puede ser una propiedad específica de cada url. el 31 oct. 2021 a las 22:46
  • De cualquier manera es muy buena práctica definir la forma de un objeto de manera fija y no tener arrays u objetos anidados hasta el infinito. Eso evita errores y comportamientos extraños, es por ello que typescript es tan popular. el 31 oct. 2021 a las 23:15
1

el problema era que estaba usando Object.keys cuando debía implementar Object.entries:

el script queda asi: (esta opción no evita la recursividad sobre la funcion que es uno de los puntos buscados, seria el tema de refactorizar)

let objA = {};
objA.opened = false;
objA.url = {};
objA.url.url1 = {normal:'black',visited:'blue',closed:'red'};
objA.url.url2 = {normal:'black',visited:'blue',closed:'red'};
objA.url.url3 = {normal:'black',visited:'blue',closed:'red'};

let objB ={opened:true,url2:{normal:'yellow',visited:'marron',closed:'green'}};


function replaceSetting(objA, objB) {

    let replace = Object.entries(objB);
    let original = Object.entries(objA);

    replace.forEach(entry => {
        const [key1, value1] = entry;
        original.forEach(entry => {
            const [key2, value2] = entry;

            if (typeof objA[key1] !== 'undefined') {
            
                objA[key1] = objB[key1];
                
            } else {
                if (typeof value2 === 'object' && Object.keys(value2).length !== 0) {

                    let tempObjB = {};
                    tempObjB[key1] = value1;
                    objA[key2] = replaceSetting(value2, tempObjB);

                }
            }
        });
    });

    return objA;
}
    
console.log(objA);

objA = replaceSetting(objA,objB);

console.log(objA);

De esta forma consigo actualizar los nodos pasados:
a. nodo opened = true
b. nodo url2= nuevas propiedades

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.