Me enfrento a un problema con la desestructuración de la matriz. Lea mis preguntas:
Esta es la matriz 1-
const Array1 = [ { label: "Fashion", value: 1 }, { label: "Electronics", value: 2 } ]Esta es matriz2-
const Array2 = [ { id: 1, values: [ { value: "S", meta: "s" }, { value: "M", meta: "m" }, { value: "Xl", meta: "xl" }, ] }, { id: 2, values: [ { value: "Red", meta: "red" }, { value: "Yellow", meta: "yellow" }, { value: "Green", meta: "green" }, ] } ] Tengo que combinar estas dos matrices cuando Id(array2) coincide con el value(array1) y también cambiar la etiqueta del campo, como si realmente necesitara esto.
const Array3 = [ { name: "Fashion", options: [ { value: "S", label: "s" }, { value: "M", label: "m" }, { value: "Xl", label: "xl" }, ] }, { name: "Electronics", options: [ { value: "Red", label: "red" }, { value: "Yellow", label: "yellow" }, { value: "Green", label: "green" }, ] } ]Ya he probado de esta manera-
const Array3 = Array1.map((item) => { return { name: item.label, values: [], options: Array2.map((e: any) => { if (e.id === item.value) { return e.values.map((v: any) => { return { label: v.meta, value: v.value } }) } }) } }) De esta función estoy obteniendo - un campo adicional con undefined -
Pero no está funcionando. Por favor ayúdenme dando una corrección de mis funciones.
Puede tomar un objeto para los nombres y asignar nuevos objetos con name en lugar de id como propiedades.
const array1 = [{ label: "Fashion", value: 1 }, { label: "Electronics", value: 2 }], array2 = [{ id: 1, values: [ { value: "S", meta: "s" }, { value: "M", meta: "m" }, { value: "Xl", meta: "xl" }] }, { id: 2, values: [{ value: "Red", meta: "red" }, { value: "Yellow", meta: "yellow" }, { value: "Green", meta: "green" }] }], names = Object.fromEntries(array1.map(({ label, value }) => [value, label])), result = array2.map(({ id, values }) => ({ name: names[id], options: values.map(({ meta: label, ...o }) => ({ ...o, label })) })); console.log(result); .as-console-wrapper { max-height: 100% !important; top: 0; }La razón por la que Array2.map no funciona es que la función de mapa siempre devuelve la misma cantidad de elementos que la matriz en la que ejecuta .map . Entonces, agregar una condición da como resultado elementos indefinidos cuando la condición no coincide. Puedes hacerlo:
options: Array2.find(e => e.id === item.value).values.map(v => { return { value: v.value, label: v.meta } }) Si bien esto funciona, recomendaría echar un vistazo a la respuesta de @Nina Scholz también, ya que utiliza Object/Dictionary, que es mucho más eficiente que ejecutar .find en Array2. O(1) frente a O(n). Entonces, si espera tener muchos elementos en Array2 o ejecutar esto con bastante frecuencia, la solución más eficiente ayudaría
¿Quizás esto es lo que quieres?
const Array3 = Array1.map(array1Item => { const foundIndex = Array2.findIndex(array2Item => array2Item.id === array1Item.value); if(foundIndex !== -1) { return { name: array1Item.label, options: Array2[foundIndex].values } }; return undefined; }); console.log(Array3); /** [{ name: "Fashion" options: Array(3) 0: {value: 'S', meta: 's'} 1: {value: 'M', meta: 'm'} 2: {value: 'Xl', meta: 'xl'} },{ name: "Electronics" options: Array(3) 0: {value: 'Red', meta: 'red'} 1: {value: 'Yellow', meta: 'yellow'} 2: {value: 'Green', meta: 'green'} }] */