Trier un tableau après un subscribe

Version imprimable

bonsoir, je souhaite trier dans ma vue les plages d'horaires, mais je ne sais pas comment le faire correctement,
voici mon composant:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
import { Component, OnInit } from '@angular/core';
import { CalendarModel } from '../calendar-model';
import { Injectable } from '@angular/core';
import { SemaineComponent } from '../semaine/semaine.component';
import { CalendarService } from '../calendar.service';
 
@Injectable()
 
@Component({
  selector: 'app-heure',
  templateUrl: './heure.component.html',
  styleUrls: ['./heure.component.css']
})
 
export class HeureComponent implements OnInit {
 
  parTranche: number = 3600; //par tranche d'une heure 3600 seconde
  trancheDeb: number = 8;//la journée commence à 8H
  trancheFin: number = 17;//la journée se termine à 17H
 
  plageJour = this.trancheFin - this.trancheDeb;
  plageHeure = new Array();// = this._semaine.courrantSemaine; si elle est vide pas d'affichage avec ngIf != 0
 
  debJ0H;//sauvegarde le jour J
  finJour;//fin de la journée
 
  constructor(private _calendar: CalendarModel, private _semaine: SemaineComponent, private _calendarService: CalendarService) {
    this.debJ0H = this._semaine.courrantSemaine[this._semaine.iBoucle];
    //console.log("0=>" + this._semaine.iBoucle);
 
    let resultat;
    this.isDayFree();//est ce que dans la journé il y a des RDV ?
    this._semaine.iBoucle++;//important d'ajouter cette incrémentation
    console.log(this.plageHeure + "UNSORT====");
 
    this.plageHeure.sort(function (a, b) {
      return a.afficheH - b.afficheH
    });
    console.log(this.plageHeure + "====SORT");
  }
 
  ngOnInit() {
 
  }
 
  isDayFree()//on vérifie si la journée est libre si true toute la journée dispo, si false on scan toutes les plage
  {
    //console.log(this._semaine.iBoucle + "==>" + this.debJ0H['debJour0H']);
    this.debJ0H['debJour0H'] + this.trancheDeb * this.parTranche; //le début de la journée
    this.finJour = this.debJ0H['debJour0H'] + this.trancheFin * this.parTranche; //on ajouter la fin de la journée pour toucheFin
    //console.log("DEBUT J=>" + this.debJ0H['debJour0H'] + "FIN J =>" + finJour);
    this._calendarService.dispoWbsRdv(this.debJ0H['debJour0H'], this.finJour).subscribe(data => {
      //on récupère les rendez-vous s'il y en a, s'il y en a pas il sera filtré avec le ngIF = 0
      console.log("array push plageHoraire---------------" + data);
      //data = false;
      //data = true la journée est libre, data = false la journée est pris afficher les plages d'horaire
      data ? this.plageHoraire() : this.pushFalse();//data = false journée dispo on passe à la suivante, data = true il faut analyser la journée
      //on affiche les plages d'horaires de la journée
      //  this._semaine.iBoucle++;//important d'ajouter cette incrémentation
    }, (error) => {
    });
  }
 
  pushFalse(): void {
    console.log("journee libre  , analyse terminé !!!");
    this.plageHeure.push(
      {
        "afficheH": this.trancheDeb, "unavailable": false //on check si une des plage son indiponible
      }
    );
 
  }
 
  //on décompose la plage sur une journée en paramètre l'indice de chaque jour dans _semaine courrantSemaine
  plageHoraire(): void {
    console.log("analyse plage horaire .....");
    for (let i = 0; i < this.plageJour; i++) { //i est le cran
      this.isPlageReserver(this.debJ0H['debJour0H'], i).subscribe(data => {
        this.plageHeure.push(
          {
            "afficheH": this.trancheDeb + i, "unavailable": data //on check si une des plage son indiponible
          }
        );
      });
    }
 
  }
 
  isPlageReserver(debutJ0, cran) {//debutJO est le timestamps du jours à 0H qu'on test , cran et la tranche d'1 heure
    //timestamps depart = debut jour à 0H + démarrage journée 8H + la tranche d'heure x 1H   
    let debutPlage = debutJ0 + (this.trancheDeb * this.parTranche) + (cran * this.parTranche);
    //timestamp final = debutPlage + la tranche d'heure de la plage de la journée
    let finPlage = debutPlage + this.parTranche; //la fin de la tranche et le début de la tranche + la tranche ici 1H
    //console.log(cran+"DEB=>" + debutPlage + "***FIN=>" + finPlage);
    return this._calendarService.dispoWbsRdv(this.debJ0H['debJour0H'], this.finJour);
    //return true;
  }
 
}

Le résultat de ma vue

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
fil de la semaine
Mar - 1524520800
 
    la journée est libre
 
Mer - 1524607200
 
    8 - 9
    9 - 10
    10 - 11
    11 - 12
    13 - 14//doit être à 12 -13
    12 - 13
    16 - 17
    15 - 16
    14 - 15
 
Jeu - 1524693600
 
    la journée est libre
 
Ven - 1524780000
 
    la journée est libre
 
Sam - 1524866400
 
    la journée est libre
 
Dim - 1524952800
 
    la journée est libre
 
Lun - 1525039200
 
    la journée est libre

j'obtiens mes heures comme ceci:
je prends juste afficheH, et j'ajoute 1 pour avoir ma plage horaire,
le but est donc uniquement heure.trier afficheH

Code:

{{heure.afficheH}} - {{heure.afficheH + 1}}

voici ma vue en html:

Code:

1
2
3
4
5
6
7
8
9
10
<ul>
    <li class="heure" *ngFor="let heure of plageHeure" [ngClass]="{ odd: (heure%2 == 0), even: heure %2 == 1 } ">
        <a *ngIf="heure.unavailable==true" [ngClass]="{ red : heure.unavailable }">
            {{heure.afficheH}} - {{heure.afficheH + 1}}
        </a>
        <a *ngIf="heure.unavailable==false" [ngClass]="{ red : heure.unavailable }">
            la journée est libre
        </a>
    </li>
</ul>

les plages d' horaires ne sont pas trié par ordre chronologique, je pense que c'est du à la réception aléatoire des résultats.

j'ai essayer cela,mais cela n'a pas fonctionné:

Code:

1
2
3
4
5
6
    console.log(this.plageHeure + "UNSORT====");
 
    this.plageHeure.sort(function (a, b) {
      return a.afficheH - b.afficheH
    });
    console.log(this.plageHeure + "====SORT");

mes console.log:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
UNSORT==== heure.component.ts:32:9
====SORT heure.component.ts:36:9
UNSORT==== heure.component.ts:32:9
====SORT heure.component.ts:36:9
UNSORT==== heure.component.ts:32:9
====SORT heure.component.ts:36:9
UNSORT==== heure.component.ts:32:9
====SORT heure.component.ts:36:9
UNSORT==== heure.component.ts:32:9
====SORT heure.component.ts:36:9
UNSORT==== heure.component.ts:32:9
====SORT heure.component.ts:36:9
UNSORT==== heure.component.ts:32:9
====SORT heure.component.ts:36:9
array push plageHoraire---------------true

comment je dois m'y prendre pour trier correctement mes plages horaires ? merci d'avance pour vos idées.

24/04/2018, 11h16
NoSmoking

Bonjour,
ta fonction de tri n'est pas « robuste », regarde Array.prototype.sort() elle devrait te retourner une des trois valeurs possibles -1, 0 et 1.

Merci de ta réponse,
j'ai essayer l'exemple de la page que tu m'a donné:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
plageHoraire(): void {
    this.plageHeureReady = false;
    console.log("analyse plage horaire .....");
    for (let i = 0; i < this.plageJour; i++) { //i est le cran
      this.isPlageReserver(this.debJ0H['debJour0H'], i).subscribe(data => {
        this.plageHeure.push(
          {
            "afficheH": this.trancheDeb + i, "unavailable": data //on check si une des plage son indiponible
          }
        );
      });
    }
 
    var items = [
      { name: "Edward", value: 21 },
      { name: "Sharpe", value: 37 },
      { name: "And", value: 45 },
      { name: "The", value: -12 },
      { name: "Magnetic", value: 13 },
      { name: "Zeros", value: 37 }
    ];
 
    items.sort(function (a, b) {
      return a.value - b.value;
    });
    console.log(items);
 
    this.plageHeure.sort(function (a, b) {
      return a.afficheH - b.afficheH;
    });
    console.log(this.plageHeure);
 
  }

voici ce que cela me renvoie:

Code:

1
2
3
 
(6)*[{…}, {…}, {…}, {…}, {…}, {…}]0: {name: "The", value: -12}1: {name: "Magnetic", value: 13}2: {name: "Edward", value: 21}3: {name: "Sharpe", value: 37}4: {name: "Zeros", value: 37}5: {name: "And", value: 45}length: 6__proto__: Array(0)concat: ƒ concat()arguments: (...)caller: (...)length: 1name: "concat"__proto__: ƒ ()[[Scopes]]: Scopes[0]constructor: ƒ Array()copyWithin: ƒ copyWithin()entries: ƒ entries()every: ƒ every()fill: ƒ fill()filter: ƒ filter()find: ƒ find()findIndex: ƒ findIndex()forEach: ƒ forEach()includes: ƒ includes()indexOf: ƒ indexOf()join: ƒ join()keys: ƒ keys()lastIndexOf: ƒ lastIndexOf()length: 0map: ƒ map()pop: ƒ pop()push: ƒ push()reduce: ƒ reduce()reduceRight: ƒ reduceRight()reverse: ƒ reverse()shift: ƒ shift()slice: ƒ slice()some: ƒ some()sort: ƒ sort()splice: ƒ splice()toLocaleString: ƒ toLocaleString()toString: ƒ toString()unshift: ƒ unshift()Symbol(Symbol.iterator): ƒ values()Symbol(Symbol.unscopables): {copyWithin: true, entries: true, fill: true, find: true, findIndex: true,*…}__proto__: Object
heure.component.ts:98

pour les items cela à bien rangé car il la donnée est directement accessible mais pour mon tableau il n'est pas trié,
peut être que la donnée n'est pas encore là ?

sinon j'a tenté ceci:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
  this.compare(this.plageHeure,this.plageHeure);
  console.log(this.plageHeure);
 
  }
 
 compare(a, b) {
  if (a.afficheH <b.afficheH )
     return -1;
  if (a.afficheH >b.afficheH)
     return 1;
  // a doit être égal à b
  return 0;
}

j'obtiens ceci:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
 
[]
0
:
{afficheH: 8, unavailable: true}
1
:
{afficheH: 9, unavailable: true}
2
:
{afficheH: 11, unavailable: true}
3
:
{afficheH: 10, unavailable: true}
4
:
{afficheH: 12, unavailable: true}
5
:
{afficheH: 13, unavailable: true}
6
:
{afficheH: 14, unavailable: true}
7
:
{afficheH: 16, unavailable: true}
8
:
{afficheH: 15, unavailable: true}
length
:
9
__proto__
:
Array(0)

comment je dois faire pour le paramètre, je dois faire une boucle pour extraire i et faire normalement:

Code:

1
2
 
 this.compare(this.plageHeure,this.plageHeure+i);

Si tu écris ta fonction à part

Code:

1
2
3
4
5
6
7
8
9
function compare(a, b) {
  if (a.afficheH < b.afficheH) {
    return - 1;
  }
  if (a.afficheH > b.afficheH) {
    return 1;
  }
  return 0;
}

il te faut passer la référence de celle ci à la méthode sort

Code:

tab.sort(compare); // on passe la référence à la fonction de comparaison

cela donne par exemple

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var tab = [
   {afficheH: 13, unavailable: true}
  ,{afficheH: 9, unavailable: true}
  ,{afficheH: 10, unavailable: true}
  ,{afficheH: 12, unavailable: true}
  ,{afficheH: 8, unavailable: true}
  ,{afficheH: 14, unavailable: true}
  ,{afficheH: 11, unavailable: true}   
  ,{afficheH: 16, unavailable: true}
  ,{afficheH: 15, unavailable: true}
];
function compare(a, b) {
  if (a.afficheH < b.afficheH) {
    return - 1;
  }
  if (a.afficheH > b.afficheH) {
    return 1;
  }
  return 0;
}
tab.sort(compare); // on passe la référence à la fonction de comparaison
console.log(JSON.stringify(tab));

pour le résultat suivant (indenté à la main)

Code:

1
2
3
4
5
6
7
8
9
10
11
[
  {"afficheH":8,"unavailable":true},
  {"afficheH":9,"unavailable":true},
  {"afficheH":10,"unavailable":true},
  {"afficheH":11,"unavailable":true},
  {"afficheH":12,"unavailable":true},
  {"afficheH":13,"unavailable":true},
  {"afficheH":14,"unavailable":true},
  {"afficheH":15,"unavailable":true},
  {"afficheH":16,"unavailable":true}
]

merci, j'ai essayer ton example:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
plageHoraire(): void {
    let desordrePlage = new Array();
    console.log("analyse plage horaire .....");
    for (let i = 0; i < this.plageJour; i++) { //i est le cran
      this.isPlageReserver(this.debJ0H['debJour0H'], i).subscribe(data => {
 
        desordrePlage.push(
          {
            "afficheH": this.trancheDeb + i, "unavailable": data //on check si une des plage son indiponible
          }
        );
        console.log( {"afficheH": this.trancheDeb + i, "unavailable": data});
      });
    }
 
    var tab = [
      {afficheH: 13, unavailable: true}
     ,{afficheH: 9, unavailable: true}
     ,{afficheH: 10, unavailable: true}
     ,{afficheH: 12, unavailable: true}
     ,{afficheH: 8, unavailable: true}
     ,{afficheH: 14, unavailable: true}
     ,{afficheH: 11, unavailable: true}   
     ,{afficheH: 16, unavailable: true}
     ,{afficheH: 15, unavailable: true}
   ];
 
   tab.sort(compare); // on passe la référence à la fonction de comparaison
   console.log(JSON.stringify(tab));
 
   console.log("test réelle");
   console.log(desordrePlage+"DDDDDDDDDDDDD");
 
 
   desordrePlage.sort(compare);
   console.log(JSON.stringify(desordrePlage));
 
   function compare(a, b) {
    if (a.afficheH < b.afficheH) {
      return - 1;
    }
    if (a.afficheH > b.afficheH) {
      return 1;
    }
    return 0;
  }
 
 
 
  }

pour la démo c'est ok:

Code:

1
2
3
 
analyse plage horaire .....
heure.component.ts:96 [{"afficheH":8,"unavailable":true},{"afficheH":9,"unavailable":true},{"afficheH":10,"unavailable":true},{"afficheH":11,"unavailable":true},{"afficheH":12,"unavailable":true},{"afficheH":13,"unavailable":true},{"afficheH":14,"unavailable":true},{"afficheH":15,"unavailable":true},{"afficheH":16,"unavailable":true}]

par contre pour la table voici ce que cela donne:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
/*
   console.log("test réelle");
   console.log(desordrePlage+"DDDDDDDDDDDDD");
 
 
   desordrePlage.sort(compare);
   console.log(JSON.stringify(desordrePlage));
 
*/
 
test réelle
heure.component.ts:99 DDDDDDDDDDDDD
heure.component.ts:103 []

un tableau vide, il ne peut trier des données vide ...

Dans ma boucle, je teste si j'ai bien mes donnée qui entre dans le tableau:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
    for (let i = 0; i < this.plageJour; i++) { //i est le cran
      this.isPlageReserver(this.debJ0H['debJour0H'], i).subscribe(data => {
 
        desordrePlage.push(
          {
            "afficheH": this.trancheDeb + i, "unavailable": data //on check si une des plage son indiponible
          }
        );
        console.log( {"afficheH": this.trancheDeb + i, "unavailable": data});
      });
    }

Code:

1
2
3
4
5
6
7
8
9
10
 
{afficheH: 8, unavailable: true}afficheH: 8unavailable: true__proto__: Object
heure.component.ts:79 {afficheH: 10, unavailable: true}
heure.component.ts:79 {afficheH: 11, unavailable: true}
heure.component.ts:79 {afficheH: 9, unavailable: true}
heure.component.ts:79 {afficheH: 13, unavailable: true}
heure.component.ts:79 {afficheH: 14, unavailable: true}
heure.component.ts:79 {afficheH: 12, unavailable: true}
heure.component.ts:79 {afficheH: 15, unavailable: true}
heure.component.ts:79 {afficheH: 16, unavailable: true}

j'ai tenté de mettre la fonction trie dans une méthode et l'appeler avec this, mais ça reste identique ...

24/04/2018, 17h34
keokaz

J'ai résolut mon problème, le trie ne faisait bien, c'est à cause de la boucle, je faisais toujours la même requête ...