Pipe ionic return object

Ionic Framework ionic-v3
1

I create a pipe to calculate the sum of (part_propritaire) but it returns objects
Can you hel me please
Template

<ion-row>
        <ion-col width-30>Cheveaux</ion-col>
        <ion-col width-20>Gain</ion-col>
        <ion-col width-25>Allocation</ion-col>
        <ion-col width-25>Pére & Mére</ion-col>
      </ion-row>
      <ion-row *ngFor="let member of members" (click)="View(member)" align-items-center>
        <ion-col width-30>
          {{member.Cheval.nom}}
        </ion-col>
        <ion-col width-20>
        {{ member | groubby}}
        </ion-col>
        <ion-col width-25>
          
        </ion-col>
        <ion-col width-25>
 
        </ion-col>

      </ion-row>

Pipe

@Pipe({
  name: 'groubby'
})
@Injectable()
export class Groubby implements PipeTransform {
    transform(input: any): number {
    if (Array.isArray(input) ) {
      return input.reduce((previous, current) => {
        return previous + parseInt(current.CourseHasCheval.part_propritaire);
      }, 0);
    }

    return input;  
  }
}

Json File

[
{
Cheval: {
id: "90",
nom: " CHEREK",
sexe: "1",
robe_id: "1",
ne: "2009",
race_id: "1",
code: "7570",
nom_p: "DARMAN",
ne_p: "1998",
nom_m: "LELLA EL BEHIA",
ne_m: "1999",
nom_pm: "SAMIR",
ne_pm: "1985",
etat: "1",
eleveur_id: "47",
propritaire: "GHARBI. MED",
photo: "",
export: "2000",
pays: "",
mise_service: null,
production: "0000"
},

CourseHasCheval: [
{
id: "182",
course_id: "327",
cheval_id: "90",
rang: "3",
temps: "4 L",
jockey_id: "14",
poids: "58",
part_jokey: "323.000",
entraineur_id: "8",
part_entraineur: "385.000",
propritaire: "GHARBI. MED",
part_propritaire: "3850.000",
eleveur_id: "47",
part_eleveur: "1925.000"
},
{
id: "660",
course_id: "209",
cheval_id: "90",
rang: "1",
temps: ".00''0/10",
jockey_id: "29",
poids: "57",
part_jokey: "660.000",
entraineur_id: "8",
part_entraineur: "660.000",
propritaire: "GHARBI. MED",
part_propritaire: "6600.000",
eleveur_id: "47",
part_eleveur: "3300.000"
},
{
id: "697",
course_id: "222",
cheval_id: "90",
rang: "2",
temps: "2 L 1/2",
jockey_id: "29",
poids: "58",
part_jokey: "631.000",
entraineur_id: "8",
part_entraineur: "770.000",
propritaire: "GHARBI. MED",
part_propritaire: "7700.000",
eleveur_id: "47",
part_eleveur: "3850.000"
},
{
id: "772",
course_id: "245",
cheval_id: "90",
rang: "1",
temps: "2.23''2/10",
jockey_id: "3",
poids: "58",
part_jokey: "6600.000",
entraineur_id: "1",
part_entraineur: "6600.000",
propritaire: "GHARBI. MED",
part_propritaire: "66000.000",
eleveur_id: "47",
part_eleveur: "33000.000"
},
]
},

image

2

This is complete abuse of pipes and will never work. You have to do all the computation in the controller. Do not rely on template constructs like ngFor for any of it. I thought we had covered this before. Prepare everything in the controller, and use the template only for display.

3

Sorry, I understood not well

4

Replace where you now have {{ member | groubby }} with {{member.sum}}. Then, in the controller, whereever the data is loaded, do your summation however is appropriate and store the result in the sum property of each member of the members array. Forget about pipes entirely, and do not try to use ngFor to modify controller state. The best result you will ever end up with is a change detection error and a white screen.

1 Like
5

So do not work with the pipe ??
Sum is a method in my controller?

6

:cry: :cry: :cry: :cry: :cry: :cry: I understood not well