1

Tengo un Array con objetos como el siguiente:

[
  {"profile": "PRUEBA1","benchmark": 0.01,"transferAmount": 3828604.78,"movement": 1},
  {"profile": "PRUEBA3","benchmark": 0.01,"transferAmount": 3828604.78,"movement": 1},
  {"profile": "PRUEBA1","benchmark": 0.01,"transferAmount": 3828604.78,"movement": 1},
  {"profile": "PRUEBA3","benchmark": 0.01,"transferAmount": 3828604.78,"movement": 1},
  {"profile": "PRUEBA1","benchmark": 0.01,"transferAmount": 3828604.78,"movement": 1},
]

Entonces tengo un menú donde tengo 3 botones:

| PRUEBA1 | PRUEBA2 | PRUEBA3 |

Necesito que cuando haga click se muestren los objetos de PRUEBA1, cuando haga click en PRUEBA3 que es muestren los de PRUEBA3 y así sucesivamente... He agrupado en un array por nombre de perfil de la siguiente manera.

of(this.allMovements).pipe(
  mergeMap(res => res),
  groupBy(item => item.profile),
  mergeMap(obs => {
    return obs.pipe(
      toArray()
    )
  }), toArray()
).subscribe((p) => {
  this.finalgroups = p;
});

Esto me da una salida como la siguiente:

0:[
  {"profile": "PRUEBA1","benchmark": 0.01,"transferAmount": 3828604.78,"movement": 1},
  {"profile": "PRUEBA1","benchmark": 0.01,"transferAmount": 3828604.78,"movement": 1},
  {"profile": "PRUEBA1","benchmark": 0.01,"transferAmount": 3828604.78,"movement": 1},
]

1:[
  {"profile": "PRUEBA3","benchmark": 0.01,"transferAmount": 3828604.78,"movement": 1},
  {"profile": "PRUEBA3","benchmark": 0.01,"transferAmount": 3828604.78,"movement": 1},
]

2:[
  undefined
]

El problema de esto es que prueba 3 debería ir en el lugar 2 del array, por que en este caso no tengo datos con el nombre del perfil PRUEBA2

Un saludo y muchas gracias!

2 respuestas 2

1

Los observables que devuelve el groupBy tienen una propiedad key que contiene el valor de la clave usada para el agrupamiento. (en tu caso sería el string PRUEBA1, PRUEBA2,...).

Usando esa key, puedes devolver los resultados de cada grupo desde el mergeMap junto con su palabra clave.

mergeMap((obs$) =>
  obs$.pipe(
    toArray(),
    map((items) => ({ [obs$.key]: items }))  // <------
  )
),

Y posteriormente combinar todos los resultados en un único objeto con las parejas de claves<>resultados usando reduce

reduce((acc, curr) => ({ ...acc, ...curr }), {})

El código completo quedaría así:

from(this.allMovements)
  .pipe(
    groupBy((item) => item.profile),
    mergeMap((obs$) =>
      obs$.pipe(
        toArray(),
        map((items) => ({ [obs$.key]: items }))
      )
    ),
    reduce((acc, curr) => ({ ...acc, ...curr }), {})
  )

Y te devolvería un objeto con los resultados de la siguiente forma:

{
  PRUEBA1: [..., ... , ...]
  PRUEBA3: [..., ...]
}

un saludo

0

Puedes hacerlo de esta forma:

//HTML
<button (click)="onClick('PRUEBA1')">
  Prueba 1
</button>
<button (click)="onClick('PRUEBA2')">
 Prueba 2
</button>
<button (click)="onClick('PRUEBA3')">
 Prueba 3
</button>

<p *ngFor="let move of data">{{ move | json }}</p>


//Typescript
export class AppComponent {
  data: Movement[] = [];
  movements: Movement[] = [
   {"profile": "PRUEBA1","benchmark": 0.01,"transferAmount": 3828604.78,"movement": 1},
   {"profile": "PRUEBA3","benchmark": 0.01,"transferAmount": 3828604.78,"movement": 1},
   {"profile": "PRUEBA1","benchmark": 0.01,"transferAmount": 3828604.78,"movement": 1},
   {"profile": "PRUEBA3","benchmark": 0.01,"transferAmount": 3828604.78,"movement": 1},
   {"profile": "PRUEBA1","benchmark": 0.01,"transferAmount": 3828604.78,"movement": 1},
  ];

  onClick(profile: string) {
    this.data = this.movements.filter((movement) => movement.profile === profile);
  }
}

Tu Respuesta

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

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