Parcourir un tableau multidimensionnel

**rickjason** · 14/04/2021, 03h25

Bonjour,

Je développe une application mobile avec IONIC/ANGULAR, depuis plusieurs je cherche désespérément une solution a mon problème.
j'interroge une API qui m'envoie des données (voir image jointe)
Nom : sisi.png
Affichages : 399
Taille : 43,7 Ko

Nom : sisi.png
Affichages : 399
Taille : 43,7 Ko

jarrive a afficher dans un tableau(dans ma pag html) a afficher certains élements; mais je n'arrive pas a afficher TAG_ID( comme le montre l'image)
voici mon code html:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<ion-row *ngFor="let payLoad of PayloadData">
          <div *ngIf= "payLoad.STATUS !== '4'">
            <ion-col >
              {{payLoad.SUBS_ID}}
            </ion-col>
            <ion-col>
              {{payLoad.SOLDE }} FCFA
            </ion-col>
          </div>
          // c'est ici mon problème
            <div ngIf="payLoad.TAGS.STATUS === '1'">
              <ion-col>
                  {{payLoad.TAGS.TAG_ID}}
              </ion-col>
            </div>
      </ion-row>

Voici mon code TypeScript:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
getHistorique() {
 
      let url = "xxxxxxxxxxxx" + this.elmt.PAYLOAD.IDENTITY;
      this.http.get(url)
        .subscribe(
           async (res: any[]) => 
           {
            this.idty = res;
            //Avec cette variable je reussi a afficher le num abonné {{payLoad.SUBS_ID}} et le solde {{payLoad.SOLDE }} FCFA
            this.PayloadData = this.idty.PAYLOAD;
           //c'estiici je n'arrive pas a entré dans TAGS pour recuperer TAG_ID
           this.ok = this.PayloadData.TAGS;
           console.log(this.ok);
          },
           async (err: any[]) => {
            console.log(err);
         });
    }

Nom : tagsError.png
Affichages : 346
Taille : 192,3 Ko

Je vous remercie d'avance

**krakatoa** · 14/04/2021, 08h26

TAGS[0]

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

 <div ngIf="payLoad.TAGS[0].STATUS === '1'">

et bien sur à modifier ici aussi :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

{{payLoad.TAGS??????.TAG_ID}}

**rickjason** · 14/04/2021, 15h21

Bonjour Krakatoa, merci d'avoir répondu.
J'ai essayé ta solution mais j'ai toujours pas de résultats attendu.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ion-row *ngFor="let payLoad of PayloadData">
        <div *ngIf= "payLoad.STATUS !== '4'">
          <ion-col >
            {{payLoad.SUBS_ID}}
          </ion-col>
          <ion-col>
            {{payLoad.SOLDE }} FCFA
          </ion-col>
        </div>
            <div *ngFor="let item of ok">
              <div *ngIf="item.TAGS[0].STATUS === '1'">
                <ion-col>
                  {{item.TAGS.TAG_ID}}
                </ion-col>
              </div>
            </div>
      </ion-row>

Mon code TS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

this.ok = this.PayloadData.TAGS;

**krakatoa** · 14/04/2021, 15h27

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
            <div *ngFor="let item of ok">
              <div *ngIf="item.TAGS[0].STATUS === '1'">
                <ion-col>
                  {{item.TAGS[0].TAG_ID}}
                </ion-col>
              </div>
            </div>

sinon que donne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

console.log("ok", ok);

**rickjason** · 14/04/2021, 18h12

Merci de prendre ton temps pour me répondre et m'aider a résoudre ce problème.
En effet avec le code:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
     <ion-row *ngFor="let payLoad of PayloadData">
        <div *ngIf= "payLoad.STATUS !== '4'">
          <ion-col >
            {{payLoad.SUBS_ID}}
          </ion-col>
          <ion-col>
            {{payLoad.SOLDE }} FCFA
          </ion-col>
        </div>
            <div *ngFor="let item of ok">
              <div *ngIf="item.TAGS[0].STATUS === '1'">
                <ion-col>
                  {{item.TAGS[0].TAG_ID}}
                </ion-col>
              </div>
            </div>
      </ion-row>

je n'arrive toujours pas a récupérer TAG_ID
Nom : A.png
Affichages : 342
Taille : 197,1 Ko

Pourtant en PHP j'ai fais ceci:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<table>
        <thead>
        <tr style="background-color: #dddddd">
            <th width="20%">N° abonnement</th>
            <th width="28%">Solde</th>
            <th width="52%">Badges</th>
        </tr>
        </thead>
        <tbody>
        <?php foreach ($details['PAYLOAD'] as  $abonnement) { ?>
        <tr>
            <td>
                <a href="details.php?abonnement=<?php echo $abonnement['SUBS_ID'] ?>">
                    <?php echo $abonnement['SUBS_ID']; ?>
                </a>
            </td>
            <td>
                <b><?php echo number_format($abonnement['SOLDE'],0,".", " ")?> FCFA</b>
            </td>
 
            //Ici je récupère TAG_ID 
            <td>
	            <?php
                    $lastKey = array_pop(array_keys($abonnement['TAGS']));
                foreach ($abonnement['TAGS'] as $key => $tag) { ?>
		            <?php
                    if($tag['STATUS'] == 1){
                        echo $tag['TAG_ID'];
                    }
                    ?>
	            <?php } ?>
            </td>
        </tr>
        <?php } ?>
        </tbody>
    </table>

Est ce qu'il y'a une façon de reproduire ceci en TYPESCRIPT ?

Merci

**krakatoa** · 14/04/2021, 19h20

le résultat de res, PayloadData et ok donne quoi ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
getHistorique() {
 
      let url = "xxxxxxxxxxxx" + this.elmt.PAYLOAD.IDENTITY;
      this.http.get(url)
        .subscribe(
           async (res: any[]) => 
           {
            this.idty = res;
               console.log("res", res);

            this.PayloadData = this.idty.PAYLOAD;  
               console.log("PayloadData ", this.PayloadData);
           this.ok = this.PayloadData.TAGS;
           console.log("ok", this.ok);
          },
           async (err: any[]) => {
            console.log(err);
         });
    }

**rickjason** · 14/04/2021, 20h26

Voici le consolelogs de res:
Nom : res_consolelogs.png
Affichages : 342
Taille : 37,7 Ko

Voici celui de ok:
Nom : ok_consolelogs.png
Affichages : 336
Taille : 2,1 Ko

Voici celui de PayloadData:
Nom : PayLoad.png
Affichages : 320
Taille : 40,3 Ko

Et quand j'essai de faire ceci:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 <div *ngIf="payLoad.TAGS[0].STATUS === '1'">
                <ion-col>
                  {{payLoad.TAGS[0].TAG_ID}}
                </ion-col>
              </div>

Je récupère seulement TAG_ID de l'index 0. (voir image)
Nom : ppp.png
Affichages : 323
Taille : 301,8 Ko

pourtant il peut avoir plusieurs index dont le statut est 1

Merci

**krakatoa** · 14/04/2021, 21h12

désolé je viens de comprendre, j'ai eu de la confusion avec ces données :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<ng-container *ngIf="PayloadData">
  <ion-row *ngFor="let payLoad of PayloadData">
 
payLoad.STATUS = {{payLoad.STATUS}}
 
          <div *ngIf= "payLoad.STATUS !== '4'">
            <ion-col >
              {{payLoad.SUBS_ID}}
            </ion-col>
            <ion-col>
              {{payLoad.SOLDE }} FCFA
            </ion-col>
          </div>
<ng-container *ngFor="let tag of payLoad.TAGS">
tag.status = {{tag.status}}
            <div ngIf="tag.STATUS === '1'">
              <ion-col>
                  {{tag.TAG_ID}}
              </ion-col>
            </div>
</ng-container>
      </ion-row>
</ng-container>

**rickjason** · 14/04/2021, 22h54

Super!!! Krakatoa, je te remercie sincèrement pour ton aide. j'affiche correctement les numéros de badges.
Cependant sa coince un peu quelque part, concernant la condition : SINON;
j'explique:
on a dit :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div ngIf="tag.STATUS === '1'">
              <ion-col>
                  {{tag.TAG_ID}}
              </ion-col>
            </div>

comment ajouter le SINON pour afficher les autres numeros de badge mais etant barré,
la version en PHP:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

}else{ echo '<del>'.$tag['TAG_ID'].'</del>'; }

resultat:

Nom : site.png
Affichages : 316
Taille : 15,5 Ko

Voilà ce que j'ai essayé:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div *ngIf="tag.STATUS === '1'; else tag.STATUS !== '1'">
                <ion-col>
                  {{tag.TAG_ID}}
                </ion-col>
                <del>{{tag.TAG_ID}}</del>
              </div>

voilà mon résultat:
Nom : mobile.png
Affichages : 323
Taille : 168,2 Ko

Il répète le même numéro de badge et le barre.
Comment donc appliquer ma condition SINON ?

Merci.

**krakatoa** · 14/04/2021, 23h34

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div *ngIf="tag.STATUS === '1'">
...
</div>
 
div *ngIf="tag.STATUS !== '1'">
....
</div>

autre méthode :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div [ngClass]="{'barred': tag.STATUS !== '1'}">{{tag.TAG_ID}}</div>

fichier css

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.barred {
css pour barré7
}

pour info :
soit des class css suivant : message, warn et error
suivant les conditions, la classe css correspondante est appliqué ou pas

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div [ngClass]="{'message': info.priority < 10,
                 'warn': info.priority > 10 && info.priority < 20, 
                 'error': info.priority > 30}">
.....
.....
</div>

**rickjason** · 14/04/2021, 23h54

Krakatoa mille fois merciiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii. ça marche nikel
merci pour ton temps, pour ton aide.

Parcourir un tableau multidimensionnel

Angular

Discussions similaires

Partager

Partager