Sé que hay docenas de preguntas con títulos similares a este, pero no pude encontrar el que resolvió mi problema.
El punto es que estoy evitando consultas innecesarias a la base de datos. Así cuando se hace la consulta se consume solo lo necesario. Obtengo los datos y los fusiono con LocalStorage para ahorrar uso.
Creé este ejemplo para que sea más fácil de leer y ayudar a los futuros usuarios:
let usersDB = [ { id: 1, name: 'John', age: 34 }, { id: 2, name: 'Rose', age: 27 }, { id: 3, name: 'Daniel', age: 40 }, ] const usersLS = [ { id: 1, name: 'John', cars: ['BMW', 'Ferrari'] }, { id: 2, name: 'Rose', cars: ['Tesla', 'Camaro'] }, { id: 4, name: 'Ambrose', cars: ['Fiat'] }, ] /** Expected Result: * [ * {id: 1, name: 'John', cars: ['BMW', 'Ferrari']}, * {id: 2, name: 'Rose', cars: ['Tesla', 'Camaro']}, * {id: 3, name: 'Daniel'}, * ] */ En el ejemplo anterior, userDB y userLS representan los usuarios de la base de datos y el almacenamiento local, respectivamente.
Naturalmente, userDB es el más "actualizado", pero userLS tiene una propiedad "cars" que no está en la misma tabla que los usuarios en la base de datos. Entonces necesito actualizar userLS usando userDB como base, pero sin perder la propiedad "cars".
Sé que podría hacer un ciclo for... para iterar sobre los usuarios y dentro de eso, otro ciclo for... para verificar si la identificación es la misma y luego generar una nueva matriz con los objetos. Sin embargo, creo que debe haber mejores formas de resolver este problema.
let newArr = []; for (let userDB of usersDB) { for (let userLS of usersLS) { if (userDB.id === userLS.id) { userDB.cars = userLS.cars newArr.push(userDB); } } } usersDB = Object.assign([...usersDB], ...newArr)El código anterior es la forma en que estoy usando para resolver este problema. ¿Se te ocurre una solución más directa?
Puede usar Array.map() en la matriz usersDB, luego fusionar propiedades con cualquier userLS encontrado para cualquier usuario dado.
Usaríamos la sintaxis extendida para fusionar cada elemento en la(s) matriz(es):
const usersDB = [ { id: 1, name: 'John', age: 34 }, { id: 2, name: 'Rose', age: 27 }, { id: 3, name: 'Daniel', age: 40 }, ] const usersLS = [ { id: 1, name: 'John', cars: ['BMW', 'Ferrari'] }, { id: 2, name: 'Rose', cars: ['Tesla', 'Camaro'] }, { id: 4, name: 'Ambrose', cars: ['Fiat'] }, ] const result = usersDB.map(( { age, ...userDB}, idx) => { let userLS = usersLS.find(u => u.id === userDB.id); return { ...userLS, ...userDB}; }, {}) console.log('Result:', result) .as-console-wrapper { max-height: 100% !important; top: 0; }Array.map ayudará
Lógica
usersDB matriz de usersDB con Array.mapusersLS comparando la identificacióncars de ese objeto a su nodo de retorno desde la función de mapa.violín de trabajo
let usersDB = [ { id: 1, name: 'John', age: 34 }, { id: 2, name: 'Rose', age: 27 }, { id: 3, name: 'Daniel', age: 40 }, ] const usersLS = [ { id: 1, name: 'John', cars: ['BMW', 'Ferrari'] }, { id: 2, name: 'Rose', cars: ['Tesla', 'Camaro'] }, { id: 4, name: 'Ambrose', cars: ['Fiat'] }, ]; const userConsolidated = usersDB.map((user) => { const usersLSnode = usersLS.find((item) => item.id === user.id); const { id, name } = user; const returnNode = { id, name }; if (usersLSnode) returnNode.cars = usersLSnode.cars; return returnNode }); console.log(userConsolidated);