3

Soy algo nuevo en esto, y no he podido encontrar una solución. Me gustaría sumar los valores de un campo llamado Towel, estoy usando una tabla dinámica en donde obtengo el campo a partir de otras funciones, utilizo Angular y Firestore.

El campo lo obtengo y lo almaceno en:

item10: string = 'Towel';

En donde para poder sumar, estaba usando este código:

  view() {
this.total = this.transactions.map(t => t.item10).reduce((acc, value) => acc + value, 0);
return this.total;   }

Sé que si escribo t.Towel en vez de t.item10 me suma correctamente, pero como el valor Towel es un valor que el usuario ingresa, hace que estos datos sean dinámicos.

La idea es usar la variable item10.

Adjunto un stackblitz que hice como ejemplo: https://stackblitz.com/edit/angular-cpvwqw?file=src%2Fapp%2Ftable-multiple-header-footer-example.ts

De antemano muchas gracias por su ayuda.

2
  • El campo item10 es de tipo cadena (string): item10: string = 'Towel'; Luego obtienes un Array cuando haces lo siguiente: this.transactions.map(t => t.item10). Todos los elementos de este Array son cadenas cuyo valor es Towel, como lo siguiente: [ 'Towel', 'Towel', ... ]. Sobre este Array estás aplicando el método reduce() que devuelve la "suma" de sus elementos, con un elemento inicial establecido en 0. Pero al ser todos los elementos de tipo cadena, el resultado es una concatenación: `0TowelTowelTowel...'. ¿Logras ver el error ahora? Saludos Commented el 3 jul. 2021 a las 7:03
  • Si, es que no se si habrá alguna forma de verlo como si fuera [key: valor], donde el item10 seria la key para poder buscar todos sus valores. No se si se puede hacer eso, talvez me estoy confundiendo.
    – Hermit
    Commented el 3 jul. 2021 a las 8:26

3 respuestas 3

2

Explicación en el código:

  item10: string = 'Towel';

  transactions: Transaction[] = [
    {id: 'B1', Towel: 4},
    {id: 'B2', Towel: 5},
    {id: 'B3', Towel: 2},
    {id: 'B4', Towel: 4},
    {id: 'B5', abc: 25}, // aquí no existe Towel así que devolverá undefined
    {id: 'B6', Towel: 15},
  ];

  total:number = 0;
  view() {
    this.total = 
    this.transactions
    // crear arreglo con los valores de la propiedad Towel
    // si el objeto no tiene la propiedad Towel entonces habrá valores
    // undefined entonces se usa el operador ?? para retornar un 0 donde Towel 
    //sea undefined
    .map(t => t[this.item10] ?? 0)
    .reduce((acc, value) => acc + value, 0);
    return this.total;
  }
1
  • Mil gracias! lo del operador ?? lo desconocía y justo eso era lo que me faltaba
    – Hermit
    Commented el 3 jul. 2021 a las 22:57
0

Puedes acceder a la clave dinamicamente:

this.total = this.transactions
          .map(t => t[this.item10] ?? 0) // aqui el cambio
          .reduce((acc, value) => acc + value, 0);
0

Creo que puede usar la desestructuración, que puede ayudarlo a obtener solo el valor que desea del objeto que recibió en el map. Haz algo como esto:

transactions = [
    {id: 'B1', Towel: 4},
    {id: 'B2', Towel: 5},
    {id: 'B3', Towel: 2},
    {id: 'B4', Towel: 4},
    {id: 'B5', Towel: 25},
    {id: 'B6', Towel: 15},
  ];

function view() {
    const total = transactions.map(({Towel}) => Towel).reduce((acc, value) => acc + value, 0);
    return total;
  }

console.log(view());

En su archivo .ts reemplace este código:

view() {
    this.total = this.transactions.map(({Towel}) => Towel).reduce((acc, value) => acc + value, 0);
    return this.total;
  }

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.