Estoy experimentando cómo puedo hacer que mi código sea más conciso cuando tengo una parte de una matriz de objetos recibidos de un punto final de API. Esta es la variable inicial:
let stringOptionsOutlet = [];Luego quiero hacer una nueva clave llamada "valor". Así es como lo hago normalmente (lo cual creo que está bien, pero creo que debe haber algunas desventajas en comparación con otras técnicas que se te ocurran):
stringOptionsOutlet = [...response.data.outlet]; // 1. this is the data I get from an API endpoint, I copy it with the spread operator stringOptionsOutlet.map((v) => return { ...v, value: "" }; ); // 2. then I make the same new value in every single data object inside the array stringOptionsOutlet Object.entries(stringOptionsOutlet).forEach((e) => { e[1].value = e[1].id; // 3. copy the value of id to the new key });Los datos antes de mapear los datos:
[ { label: "A1-1", id: "1", }, { label: "B2-1", id: "4", }, ]Después del mapeo (paso número 2 y número 3):
[ { label: "A1-1", id: "1", value: "1", }, { label: "B2-1", id: "4", value: "1" }, ]¿Podría también explicar los beneficios y las deficiencias de las técnicas? Gracias.
Lo que está haciendo funcionará, pero ciertamente hay algunos pasos innecesarios tal como están escritos. No es necesario copiar los datos de respuesta de la API en una matriz y luego cambiar el contenido de la matriz cuando puede asignar la respuesta de la API en sí.
// You can do steps 1 2 and 3 all in 1 .map() const stringOptionsOutlet = response.data.outlet.map(v => { return { ...v, value: v.id } }) La desventaja de hacerlo todo de una sola manera es que, si desea aplicar una lógica más compleja, esa sola llamada .map podría abarrotarse mucho y tal vez sería más sencillo introducir un paso por separado, con la advertencia de que entonces procesar los datos por segunda vez.
Prueba esto:
stringOptionsOutlet.map((v) => ({ ...v, value: v.id }));