Para uno de los requisitos de mi aplicación de comercio electrónico, tengo una matriz anidada del formulario (Muestra):
const data = [ { "id": 1, "group": "upper-wear", "labels": [ { "type": "shirts", "quantity": "20", }, ], popular: true }, { "id": 2, "group": "bottom-wear", "lables": [ { "type": "trousers", "quantity": "31", }, ], popular: true }, ]Para esta matriz, necesito insertar nuevos objetos en las 'etiquetas' de la matriz si el valor del grupo es igual a 'desgaste superior'.
const newDataToInsert = [ { "type": 'blazers', "quantity": 19 }, ]Esto es lo que intenté hasta ahora, teniendo en cuenta que por ahora solo necesito insertar una sola etiqueta (es decir, 'desgaste superior') (en el futuro, puede haber varias categorías de etiquetas 'desgaste superior', 'desgaste inferior', para ser insertado en):
const updatedArray = data.map((datum) => { if (datum.group === 'upper-wear') { return { ...datum, labels: [...datum.labels, ...newDataToInsert] }; } }); console.log(updatedArray);Pero parece haber un problema tonto que me falta ya que el resultado es así:
[ { id: 1, group: 'upper-wear', labels: [ [Object], [Object] ], popular: true }, undefined ]Sé que puede haber mejores enfoques disponibles, pero esto es lo que puedo considerar como la solución mínima por ahora.
cualquier ayuda para resolver la solución actual o mejor será muy apreciada.
Prueba con esto
updatedArray = data.map((d) => { if (d.group && d.group === 'upper-wear') { return { ...d, labels: d.labels.concat(newDataToInsert) } } else { return d; } }) const data = [ { "id": 1, "group": "upper-wear", "labels": [ { "type": "shirts", "quantity": "20", }, ], popular: true }, { "id": 2, "group": "bottom-wear", "lables": [ { "type": "trousers", "quantity": "31", }, ], popular: true }, ]; const newDataToInsert = [ { "type": 'blazers', "quantity": 19 }, ]; const updatedArray = data.map((d) => { if (d.group && d.group === 'upper-wear') { return { ...d, labels: d.labels.concat(newDataToInsert) } } else { return d; } }); console.log(updatedArray)Explicación
Aquí, mientras mapeamos los data , verificamos la condición
SI
b return { ...b }lables return { ...d, labels: d.labels.concat(newDataToInsert) } , Según la naturaleza predeterminada de JSON, la nueva variable con el mismo nombre contendrá el último valornewDataToInsert labels: d.labels.concat(newDataToInsert) , fusionará 2 matrices y las almacenará en JSON con las labels de nombreMás
else { return d; }En realidad, no necesita iterar con el map sobre la matriz. Simplemente encuentre un objeto en la matriz y cambie lo que desee.
const data=[{id:1,group:"upper-wear",labels:[{type:"shirts",quantity:"20"}],popular:true},{id:2,group:"bottom-wear",lables:[{type:"trousers",quantity:"31"}],popular:true}]; const newDataToInsert=[{type:"blazers",quantity:19}]; data.find(({ group }) => group === 'upper-wear')?.labels.push(...newDataToInsert); console.log(data); .as-console-wrapper { max-height: 100% !important; top: 0; }No está devolviendo todos los objetos de su mapa. solo está devolviendo un resultado cuando se cumplen sus criterios. Esto está dando como resultado sus objetos indefinidos ...
const data = [ { "id": 1, "group": "upper-wear", "labels": [ { "type": "shirts", "quantity": "20", }, ], popular: true }, { "id": 2, "group": "bottom-wear", "lables": [ { "type": "trousers", "quantity": "31", }, ], popular: true }, ] const newDataToInsert = [ { "type": 'blazers',"quantity": 19 }, ] const updatedArray = data.map(datum => { if (datum.group === 'upper-wear') datum.labels = [...datum.labels, ...newDataToInsert] return datum }); console.log(updatedArray);