Italian developers help me

andyweb_2016 · May 23, 2022, 8:07am

Ciao, qualcuno che mi può aiutare a fare questo:
ho un result json tipo questo:
{
“risultati”: [
{
“data_filtro”: “2022-05-17”,
“amount”: “8.35”,
“tipo”: “2”,
“data_operation”: “2022-05-17 20:13:51”
},
{
“data_filtro”: “2022-05-17”,
“amount”: “11.35”,
“tipo”: “2”,
“data_operation”: “2022-05-17 13:03:51”
},
{
“data_filtro”: “2022-05-16”,
“amount”: “33.35”,
“tipo”: “3”,
“data_operation”: “2022-05-16 13:03:51”
}
]
}

dovrei mostrare i risultati per data, quindi raggruppare quelli con la stessa data e mostrarli nel template

ciccilleju · May 23, 2022, 10:29am

ciao, ti scrivo fra poco, finisco una cosa e ti scrivo due righe

ciccilleju · May 23, 2022, 10:45am

ecco un ipotetico esempio.
Scrivo in inglese così tutti possono leggere in caso avessero bisogno.

let’s assume that your array item has the following values:

  array = [{
    "data_filtro": "2022-05-17",
    "amount": "8.35",
    "tipo": "2",
    "data_operation": "2022-05-17 20:13:51"
  },
  {
    "data_filtro": "2022-05-11",
    "amount": "33.35",
    "tipo": "3",
    "data_operation": "2022-05-16 13:03:51"
  },
  {
    "data_filtro": "2022-05-17",
    "amount": "11.35",
    "tipo": "2",
    "data_operation": "2022-05-17 13:03:51"
  },
  {
    "data_filtro": "2022-05-16",
    "amount": "33.35",
    "tipo": "3",
    "data_operation": "2022-05-16 13:03:51"
  }
  ];

Here following an example for sorting your array item.

First of all, sort the array by date.
for example, if you get your array item from your backend you can simply do something like this:

  ionViewWillEnter() {
    this.array.sort((a,b) => a.data_filtro.localeCompare(b.data_filtro));
  }

after that, just show your items with ngFor

<ion-content>
    <ion-card *ngFor="let item of array">
        <ion-card-header>
            <ion-card-title>{{item.data_filtro}}</ion-card-title>
        </ion-card-header>
        <ion-card-content>
            Tipo: {{item.tipo}}
        </ion-card-content>
    </ion-card>
</ion-content>

this will be the result:

ciao!

ps: in un forum internazionale è consigliato scrivere in inglese, poi magari inserendo anche una traduzione in italiano. Questo per due motivi: il primo, scrivendo in inglese riusciresti a far arrivare il messaggio a molta più gente e quindi diventerebbe molto più facile risolvere il tuo problema e poi per una questione di “forma”, non è bello essere “esclusivi” ma in questi contesti bisogna essere il più inclusivi possibile

andyweb_2016 · May 23, 2022, 1:24pm

Ciao, grazie per la risposta, ho questo template:

  <ion-item style="margin-bottom: 3px;">

Deposit

  <span>{{balance.amount}}</span>
</ion-col>

</ion-item>

praticamente vorrei che i riusltati fossero divisi dalla data e quindi per ogni data visualizzare i propri risultati sulla ion-list

ciccilleju · May 23, 2022, 1:30pm

rimappa l’oggetto javascript in un nuovo oggetto il cui elemento principale sarà dato da
{ data_filtrata1: { … items },
data_filtra2: { …items}
}

ecc ecc

ciccilleju · May 23, 2022, 1:33pm

anche se la cosa più semplice, sinceramente, è far arrivare questo dato direttamente pronto dal backend

andyweb_2016 · May 23, 2022, 1:43pm

Grazie, io lato server prendo i dati da mysql con php, come mi consigli di fare?

ciccilleju · May 23, 2022, 1:50pm

Raggruppare i dati lato backend oppure usare rxjs per manipolare i dati su ionic. Appenanho tempo ti scrivo un esempio

ciccilleju · May 23, 2022, 2:21pm

here the code:


<ion-content>
    <ion-card *ngFor="let item of array_sorted ">
        <ion-card-header>
            <ion-card-title>{{item[0]}}</ion-card-title>
        </ion-card-header>
        <ion-card-content>
            <p *ngFor="let amount of item[1] ">
                Amount: {{amount}}
            </p> <br>
        </ion-card-content>
    </ion-card>
</ion-content>

and in your .ts file

import { Component } from '@angular/core';
import { groupBy, mergeMap, toArray } from 'rxjs/operators';
import { from, zip, of } from 'rxjs';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  array_sorted = [];

  array = [{
    "data_filtro": "2022-05-17",
    "amount": "8.35",
    "tipo": "2",
    "data_operation": "2022-05-17 20:13:51"
  },
  {
    "data_filtro": "2022-05-11",
    "amount": "33.35",
    "tipo": "3",
    "data_operation": "2022-05-16 13:03:51"
  },
  {
    "data_filtro": "2022-05-17",
    "amount": "11.35",
    "tipo": "2",
    "data_operation": "2022-05-17 13:03:51"
  },
  {
    "data_filtro": "2022-05-16",
    "amount": "33.35",
    "tipo": "3",
    "data_operation": "2022-05-16 13:03:51"
  }
  ];


  constructor(
  ) {
  }


  ionViewWillEnter() {
    this.array.sort((a, b) => a.data_filtro.localeCompare(b.data_filtro));
    from(from(this.array)
      .pipe(
        groupBy(
          data => data.data_filtro,
          item => item.amount
        ),
        mergeMap(group => zip(of(group.key), group.pipe(toArray())))
      )).subscribe(res => this.array_sorted.push(res));
  }

}

result:

andyweb_2016 · May 23, 2022, 3:06pm

Grande, provo e ti mando feedback…!!! Top

Tommertom · May 23, 2022, 7:18pm

Don’t want to spoil a great italian party but, maybe ditch the subscribe, add async pipe and also ditch one from?

And the first sort can be done inside the main pipe using, map, right?

So something like this (with syntax errors probably):

<ion-content>
    <ion-card *ngFor="let item of array_sorted | async">
        <ion-card-header>
            <ion-card-title>{{item[0]}}</ion-card-title>
        </ion-card-header>
        <ion-card-content>
            <p *ngFor="let amount of item[1] ">
                Amount: {{amount}}
            </p> <br>
        </ion-card-content>
    </ion-card>
</ion-content>

import { Component } from '@angular/core';
import { groupBy, mergeMap, toArray } from 'rxjs/operators';
import { from, zip, of } from 'rxjs';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  array_sorted = Observable<any[]>;

  array = [{
    "data_filtro": "2022-05-17",
    "amount": "8.35",
    "tipo": "2",
    "data_operation": "2022-05-17 20:13:51"
  },
  {
    "data_filtro": "2022-05-11",
    "amount": "33.35",
    "tipo": "3",
    "data_operation": "2022-05-16 13:03:51"
  },
  {
    "data_filtro": "2022-05-17",
    "amount": "11.35",
    "tipo": "2",
    "data_operation": "2022-05-17 13:03:51"
  },
  {
    "data_filtro": "2022-05-16",
    "amount": "33.35",
    "tipo": "3",
    "data_operation": "2022-05-16 13:03:51"
  }
  ];

  constructor() {
  
    this.array_sorted= from(this.array)
      .pipe(
        map(array=>{array.sort((a, b) => a.data_filtro.localeCompare(b.data_filtro))}),
        groupBy(
          data => data.data_filtro,
          item => item.amount
        ),
        mergeMap(group => zip(of(group.key), group.pipe(toArray())))
      );
  }

}

And later on - remove this.array and replace by a service, and use $ sign for variable etc…for future forum posts

ciccilleju · May 23, 2022, 7:24pm

Extremely right. I was in hurry

andyweb_2016 · May 30, 2022, 8:15am

ciao, mi da errore su sort errore: La proprietà ‘sort’ non esiste nel tipo ‘unknown’.
questo è il codice che ho scritto dove risultato_history è l’array che ricavo dalla chiamata get.

constructor(public http: HttpClient,public modalController: ModalController) {

this.array_sorted= from(this.risultato_history)
  .pipe(
    map(risultato_history=>{risultato_history.sort((a, b) => a.data_filtro.localeCompare(b.data_filtro))}),
    groupBy(
      data => data.data_filtro,
      item => item.amount
    ),
    mergeMap(group => zip(of(group.key), group.pipe(toArray())))
  );

}

ciccilleju · May 30, 2022, 9:46am

you should show us the items you are getting from (i think) the http request.

it’s really hard to us understanding what is happening without seeing the whole code

Maybe you don’t need the first from()
anyway, show us the http request service.

ps: please write your next messages in english.