Hola desarrolladores, estoy tratando de mapear el valor clave que tengo en una matriz de objetos, en otra matriz de menor longitud, pero debido a la tarea que me comprometí, es necesario hacerlo de esta manera.
Digamos que tengo una matriz de objetos de longitud 2 con esta estructura:
const array1=[ { status: "ok", actual: true }, { status: "not ok" }, ]Y la matriz que pretendo agregar a esta tiene una longitud mayor y se ve así:
const iconsStepper = [ { icon: 'x' }, { icon: 'xx' }, { icon: 'xxx' } ];Entonces, el resultado esperado, teniendo en cuenta que necesito acoplar la segunda matriz a la primera, sería:
[ { status: "ok", actual: true ,icon:x}, { status: "not ok",icon:xx }, {icon:xxx }, ]Obtuve una función que asigna la segunda matriz a la primera:
array1.map((object, index) => ({ ...object, icon: iconsStepper[index].icon, }));y siguiendo esta lógica el resultado arrojado es:
[ { status: "ok", actual: true ,icon:x}, { status: "not ok",icon:xx }, ]Al omitir el último objeto de la matriz iconSteaper, la longitud de la matriz a la que se suponía que debería asignarse es menor
¿Cómo puedo solucionar este problema sin invertir con precisión la matriz para mapear? Gracias
Puede fusionar las matrices reduciéndolas y obtener todas las propiedades de los mismos índices en el mismo lugar.
const array1 = [{ status: "ok", actual: true }, { status: "not ok" }], array2 = [{ icon: 'x' }, { icon: 'xx' }, { icon: 'xxx' }], result = [array1, array2].reduce((r, a) => { for (let i = 0; i < a.length; i++) Object.assign(r[i] ??= {}, a[i]); return r; }, []); console.log(result); .as-console-wrapper { max-height: 100% !important; top: 0; }Un enfoque ligeramente diferente con el mapeo de las matrices.
const array1 = [{ status: "ok", actual: true }, { status: "not ok" }], array2 = [{ icon: 'x' }, { icon: 'xx' }, { icon: 'xxx' }], result = [array1, array2].reduce((r, a) => Object.assign( r, a.map((o, i) => ({...r[i], ...o })) ), []); console.log(result); .as-console-wrapper { max-height: 100% !important; top: 0; } const array1 = [ { status: "ok", actual: true }, { status: "not ok" }, ]; const iconsStepper = [ { icon: 'x' }, { icon: 'xx' }, { icon: 'xxx' }, ]; const output = array1.length > iconsStepper.length ? array1.map((object, index) => { const returnObj = { ...object, } if (iconsStepper[index]) { returnObj['icon'] = iconsStepper[index].icon } return returnObj; }) : iconsStepper.map((object, index) => ({ ...array1[index], icon: iconsStepper[index].icon, })); console.log(output)Puede combinar Array#reduce() y Array#map() de la siguiente manera:
const arr1 = [{status: "ok", actual: true },{ status:"not ok" }]; const arr2 = [{ icon: 'x' },{ icon: 'xx' },{ icon: 'xxx' }]; const result = [arr1, arr2].reduce( (acc,cur) => !acc.length ? cur : cur.map((e,i) => ({...acc[i],...e})), [] ); console.log( result );