How to show my calcul for each array with typescript and api?

Viewed 45

I create an algorithme which sum different data.

this.http.get(url)
  .subscribe(result => {

    this.lineup = result.json();
    this.lineup = Array.of(this.lineup);

    for(let i = 0; i < this.lineup['0']['data'].latest['data'].length; i++){
       let fix = this.lineup['0']['data'].latest['data'][i];
       this.fix = this.lineup['0']['data'].latest['data'];
       this.fix.sort(function (a, b) {
                a = new Date(a.time.starting_at.date);
                b = new Date(b.time.starting_at.date);
                return a<b ? 1 : a>b ? -1 : 0;
       });
       let lined = this.fix[i].lineup['data'][i];
       this.lined = this.fix[i].lineup['data'];
       this.lined = this.lined.filter(lined => lined.player_id === 580);
       this.cards = this.lined['0'];

       if(this.cards != undefined) {
         this.note = 5;
         console.log("first",this.note);
         this.note = this.note + (0.8 * this.cards.stats.goals.scored);
         this.note = this.note - (0.4 * this.cards.stats.goals.conceded);
         this.note = this.note + (0.1 * this.cards.stats.shots.shots_total);
         this.note = this.note + (0.2 * this.cards.stats.shots.shots_on_goal);
         this.note = this.note + (0.1 * this.cards.stats.fouls.drawn);
         this.note = this.note - (0.4 * this.cards.stats.fouls.committed);
         this.note = this.note - (0.4 * this.cards.stats.cards.yellowcards);
         this.note = this.note - (3 * this.cards.stats.cards.redcards);
         this.note = this.note + (0.2 * this.cards.stats.passing.crosses_accuracy);
         this.note = this.note + (0.01 * this.cards.stats.passing.passes);
         if (this.cards.stats.passing.passes_accuracy > 80) {
            this.note = this.note + (0.5);
         } else {
            this.note = this.note - (0.5);
         }
         this.note = this.note + (0.4 * this.cards.stats.other.assists);
         this.note = this.note - (0.3 * this.cards.stats.other.offsides);
         this.note = this.note + (0.01 * this.cards.stats.passing.passes);
         this.note = this.note + (1 * this.cards.stats.other.saves);
         this.note = this.note + (2 * this.cards.stats.other.pen_saved);

         this.note = this.note - (1.5 * this.cards.stats.other.pen_missed);
         this.note = this.note - (1 * this.cards.stats.other.pen_committed);
         this.note = this.note + (0.3 * this.cards.stats.other.hit_woodwork);

         this.note = this.note + (0.3 * this.cards.stats.other.tackles);
         this.note = this.note + (0.3 * this.cards.stats.other.blocks);
         this.note = this.note + (0.4 * this.cards.stats.other.interceptions);
         this.note = this.note + (0.1 * this.cards.stats.other.clearances);
         console.log('note finale', this.note)
      }
   });

The problem, with my console log, I have 1 note for each array like this :

player.ts:260 note finale 8.400000000000002

player.ts:260 note finale 8.64

player.ts:260 note finale 7.38

player.ts:260 note finale 8.839999999999998

player.ts:260 note finale 7.040000000000001

player.ts:260 note finale 8.78

player.ts:260 note finale 7.84

player.ts:260 note finale 9.700000000000001

player.ts:260 note finale 7.760000000000001

But in my html file, only last note is showing :

<ion-col *ngFor="let event of fix" col-6 style=" font-size: 19px;padding:  3px;vertical-align:middle;color:#4B4B4B;text-align: left; padding-left:5%;">
               {{event.localTeam.data.name}} - {{note}}

             </ion-col>

Any idea? Thanks.

1 Answers

First off, your code is very messy, you have let fix = ...['data'][i] then the line after you have this.fix = ...['data'] and then never use the variable fix. Same thing with your lined variable. Plus you are setting every this.fix to the 0th element of your json, which I am guessing is wrong. Do you want to use fix and lined local variables or stick with this.fix and this.lined arrays because they are two separate variables. Then you have your this.note variable which is a single variable, not an array, which is why you are getting a single note in your html.

Your big problem is that you have variables like this.fix and this.note which are not arrays, they are a single object. Then when you are using the *ngFor you are looping a single object, which will be populated from the last time you ran your for loop in your typescript. If I were you, I would try something like this:

ts

lined: Array<any> = [];
fix: Array<any> = [];
cards: Array<any> = [];
note: Array<any> = [];

this.http.get(url).subscribe(result => {
this.lineup = result.json();
this.lineup = Array.of(this.lineup);

for(let i = 0; i < this.lineup['0']['data'].latest['data'].length; i++) {
   this.fix[i] = this.lineup['i']['data'].latest['data'];
   this.fix[i].sort(function (a, b) {
            a = new Date(a.time.starting_at.date);
            b = new Date(b.time.starting_at.date);
            return a<b ? 1 : a>b ? -1 : 0;
   });

   this.lined[i] = this.fix[i].lineup['data'];
   this.lined[i] = this.lined[i].filter(lined => lined.player_id === 580);
   this.cards = this.lined[i]['0'];

   if(this.cards != undefined) {
     this.note[i] = 5;
     console.log("first",this.note);
     this.note[i] = this.note[i] + (0.8 * this.cards.stats.goals.scored);
     this.note[i] = this.note[i] - (0.4 * this.cards.stats.goals.conceded);
     this.note[i] = this.note[i] + (0.1 * this.cards.stats.shots.shots_total);
     this.note[i] = this.note[i] + (0.2 * this.cards.stats.shots.shots_on_goal);
     this.note[i] = this.note[i] + (0.1 * this.cards.stats.fouls.drawn);
     this.note[i] = this.note[i] - (0.4 * this.cards.stats.fouls.committed);
     this.note[i] = this.note[i] - (0.4 * this.cards.stats.cards.yellowcards);
     this.note[i] = this.note[i] - (3 * this.cards.stats.cards.redcards);
     this.note[i] = this.note[i] + (0.2 * this.cards.stats.passing.crosses_accuracy);
     this.note[i] = this.note[i] + (0.01 * this.cards.stats.passing.passes);
     if (this.cards.stats.passing.passes_accuracy > 80) {
        this.note[i] = this.note[i] + (0.5);
     } else {
        this.note[i] = this.note[i] - (0.5);
     }
     this.note[i] = this.note[i] + (0.4 * this.cards.stats.other.assists);
     this.note[i] = this.note[i] - (0.3 * this.cards.stats.other.offsides);
     this.note[i] = this.note[i] + (0.01 * this.cards.stats.passing.passes);
     this.note[i] = this.note[i] + (1 * this.cards.stats.other.saves);
     this.note[i] = this.note[i] + (2 * this.cards.stats.other.pen_saved);

     this.note[i] = this.note[i] - (1.5 * this.cards.stats.other.pen_missed);
     this.note[i] = this.note[i] - (1 * this.cards.stats.other.pen_committed);
     this.note[i] = this.note[i] + (0.3 * this.cards.stats.other.hit_woodwork);

     this.note[i] = this.note[i] + (0.3 * this.cards.stats.other.tackles);
     this.note[i] = this.note[i] + (0.3 * this.cards.stats.other.blocks);
     this.note[i] = this.note[i] + (0.4 * this.cards.stats.other.interceptions);
     this.note[i] = this.note[i] + (0.1 * this.cards.stats.other.clearances);
     console.log('note finale', this.note)
}
});

html

<ion-col *ngFor="let event of fix; let i = index" col-6 style=" font-size: 19px;padding:  3px;vertical-align:middle;color:#4B4B4B;text-align: left; padding-left:5%;">
  {{event.localTeam.data.name}} - {{note[i]}}
</ion-col>

If this doesn't work, clean up your code, get rid of your extra variables, try to do a simple *ngFor and then build up to use your variables, then ask again.

Related