Parcourir un tableau multidimensionnel

Version imprimable

2 pièce(s) jointe(s)

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)
Pièce jointe 595617

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:

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:

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);
         });
    }

Pièce jointe 595616

Je vous remercie d'avance

14/04/2021, 08h26
krakatoa

TAGS[0]

Code:

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

et bien sur à modifier ici aussi :

Code:

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

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

Code:

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:

this.ok = this.PayloadData.TAGS;

Code:

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:

console.log("ok", ok);

1 pièce(s) jointe(s)

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

Code:

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
Pièce jointe 595664

Pourtant en PHP j'ai fais 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
<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

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

Code:

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);
         });
    }

14/04/2021, 20h26
rickjason

4 pièce(s) jointe(s)
Voici le consolelogs de res:
Pièce jointe 595675

Voici celui de ok:
Pièce jointe 595676

Voici celui de PayloadData:
Pièce jointe 595677

Et quand j'essai de faire ceci:
Code:

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)
Pièce jointe 595678
pourtant il peut avoir plusieurs index dont le statut est 1

Merci

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

Code:

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>

2 pièce(s) jointe(s)

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:

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:

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

resultat:
Pièce jointe 595684

Voilà ce que j'ai essayé:
Code:

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:
Pièce jointe 595685

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

Merci.

Code:

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

Code:

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

fichier css
Code:

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:

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

14/04/2021, 23h54
rickjason

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