Méthode pour afficher des enregistrements depuis une API incomplète

Version imprimable

Bonjour,

J'ai un JSON qui est ci-dessous et j'aimerai bien afficher deux variables qui sont QUANTITY et ISINCODE.

https://jsonblob.com/944380858471825408

Dans le JSON, vous retrouvez ces infos sur PORTFOLIO > REGROUPEMENT > ELEMENT

Au niveau du code, la première chose que j'ai essayé de faire c'est d'afficher tous les datas en console.log, j'y suis parvenu, c'est à dire que je récupère bien les datas.

Voici https://www.zupimages.net/up/22/07/jz4p.png

Par contre, mon réel problème est au niveau du code TS.

Ma méthode n'est pas complète, il me manque des éléments et je n'arrive pas à ajouter QUANTITY et ISINCODE sans avoir des bugs de compilation.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
getTitles(mode: PortfolioModeEnum): void {
    this.portfolioValue = 0;
    this.lines = [];
 
    this.service.getPortfolios(mode).pipe(
      takeUntil(this.unsubscribe$)
    ).subscribe(res => {
      if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
        this.portfolioValue = res.PORTFOLIO.VALPTF;
        this.lines = res.PORTFOLIO.REGROUPEMENT.map(x => {
          console.log("Data => " + JSON.stringify(res.PORTFOLIO.REGROUPEMENT));
          ???????
          return x;
        });
      }
    });
  }

Si ça peut vous aider, voici également le fichier portfolio.response.ts.

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
export interface PortfolioResponse extends ApiResponse {
    PORTFOLIO: {
        VALPTF: number;
        DETAILS: {
            ACCOUNTLAB: string;
            ACCOUNTTYPE: string;
            LABEL: string;
            ACCOUNTPHYSICAL: string;
        };
        REGROUPEMENT: InstrumentRegroupement[];
    }
}
 
export interface InstrumentRegroupement {
    TYPEVALUE: number;
    ASSETCATLABEL: string;
    CURRENCY: string;
    AMOUNT: number;
    PERCENTAGE: number;
    ELEMENT: {
        LABEL: string;
        STOCK: string;
        SVM: number;
        COUPONNUMBER: number;
        ISINCODE: string;
        MARKETPLACE: string;
        TYPEVALUE: number;
        ASSETCATLABEL: string;
        INSTRCURRENCY: string;
        AVERAGEDPRICE: number;
        QUANTITY: number;
        LASTPRICE: number;
        CURRENCYVALO: string;
        PRICEVARIATION: number;
        CAPITALGAINLOSS: number;
        ACCRUEDINTERESTS: number;
        VALORIZATION: number;
        VALORIZATIONEUR: number;
        DIFFER: number;
        DIFFEREUR: number;
        PERCENTAGE: number;
        BLOCKCATEGORY: string;
        BLOCKQUANTITY: number;
        AVALLOWED: string;
        PLACECODE: number;
        PLACELABEL: string;
        SECURITYPRICEVARIATIONPRC: number;
        SECURITYPRICEVARIATIONNOM: number;
        INITIALPURCHASEDATE: string;
        NOTATION: string;
        NBRORDRENOTE: number;
        PERFACHAT: number;
        REGROUP: number;
    }[];
 
    sort: { by: PortfolioSortEnum, dir: '' | 'asc' | 'desc' };
    showLine: boolean;
}

Je vous remercie pour votre aide et le temps que vous consacrerez à mon problème.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
getTitles(mode: PortfolioModeEnum): void {
    this.portfolioValue = 0;
    this.lines = [];
 
    this.service.getPortfolios(mode).pipe(
      takeUntil(this.unsubscribe$)
    ).subscribe(res => {
      if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
           console.log(res.PORTFOLIO);
           console.log(res.PORTFOLIO.REGROUPEMENT.ELEMENT[0].QUANTITY);
      }
    );

ça donne quoi les 2 consoles ?

Hello,

Pour la première console, voici une capture d'écran:

https://zupimages.net/up/22/07/0834.png

Console 1 => + [object Object]

Pour la seconde console, j'ai un message d'erreur dans VisualStudioCode

https://zupimages.net/up/22/07/4n47.png

Property 'ELEMENT' does not exist on type 'InstrumentRegroupement[]

Juste pour info, j'ai déjà partager le fichier "InstrumentRegroupement" dans mon premier message au cas où.

Pour l'instant, avec tes deux consoles mon code est présenté comme ceci:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 getTitles(mode: PortfolioModeEnum): void { this.portfolioValue = 0; this.lines = []; this.service.getPortfolios(mode).pipe( takeUntil(this.unsubscribe$) ).subscribe(res => { if (res.RETURNCODE === ApiResponseCodeEnum.Ok) { console.log("Console 1 => + " + res.PORTFOLIO); console.log(res.PORTFOLIO.REGROUPEMENT.ELEMENT[0].QUANTITY); } }); }
Si tu as une autre solution, je suis vraiment intéressé.

Merci d'avance

et ça ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
getTitles(mode: PortfolioModeEnum): void {
    this.portfolioValue = 0;
    this.lines = [];
 
    this.service.getPortfolios(mode).pipe(
      takeUntil(this.unsubscribe$)
    ).subscribe((res: any) => {
      if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
           console.log(res);
      }
    );

ensuite essaye :

Code:

1
2
3
4
5
6
7
8
9
10
11
getTitles(mode: PortfolioModeEnum): void {
    this.portfolioValue = 0;
    this.lines = [];
 
    this.service.getPortfolios(mode).pipe(
      takeUntil(this.unsubscribe$)
    ).subscribe((res: any) => {
      if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
           console.log(res['PORTFOLIO']);
      }
    );

19/02/2022, 16h57
Tamzoro

Bonjour,

Pour le premier test, se sont bien les données que j'aimerai afficher en HTML.

https://zupimages.net/up/22/07/3g0e.png

Pour le second test, idem les donnés sont bien là, j'aperçois bien ISINCODE et QUANTITY est un peu plus en bas.

https://zupimages.net/up/22/07/3g0e.png
19/02/2022, 17h08
Tamzoro

@krakatoa:

J'ai retiré "Console 1 = >" et bizarrement des infos s'affiche sur la console...

Pour console.log(res.PORTFOLIO);

Pareil que @Dukoid j'ai bien les donnés qui s'affichent

https://zupimages.net/up/22/07/nuxz.png

Pour console.log(res.PORTFOLIO.REGROUPEMENT.ELEMENT[0].QUANTITY);

J'ai un message d'erreur

core.mjs:6484 ERROR TypeError: Cannot read properties of undefined (reading '0')

https://zupimages.net/up/22/07/1e50.png

Voici comment est représenté le code de ma méthode

https://zupimages.net/up/22/07/os2l.png

tu vois avec le console.log on voit bien la structure des données que tu reçois
toujours vérifier la structure avec le resultat du console.log

tu remarque pas que REGROUPEMENT est un tableau ?
tout autant que ELEMENT ?

donc un tableau on y a accède avec une clé soir un index (0,1,2...) ou avec une clé associatif que l'on nomme comme on veut : ['ma_cle1') = 'toto';
ici se sont des index :0 , 1...

donc res.REGROUPEMENT[0].ELEMENT[0]

après tu peux boucler avec un for sur les index
Code:

1 2 3 4 5 6 7 res.REGROUPEMENT.forEach(regroupement => console.log(regroupement)); ainsi à chaque boucle de FOR, regroupement va valoir successivement : regroupement = res.REGROUPEMENT[0] regroupement = res.REGROUPEMENT[1] regroupement = res.REGROUPEMENT[2] etc....
comme il y a 2 tableau donc 2 forEach imbriqué:
Code:

1 2 3 res.REGROUPEMENT.forEach(regroupement=> regroupement.ELEMENT.forEach(element => console.log(element) ); );

Hello,

Ok, si je comprends bien, il faut utiliser 2 boucles pour faire fonctionner le truc.

Dans un premier temps, je veux juste afficher la quantité , donc la méthode , j'ai actuellement ceci:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 getTitles(mode: PortfolioModeEnum): void { this.portfolioValue = 0; this.lines = []; this.service.getPortfolios(mode).pipe( takeUntil(this.unsubscribe$) ).subscribe((res: any) => { if (res.RETURNCODE === ApiResponseCodeEnum.Ok) { res.REGROUPEMENT.forEach(regroupement=> regroupement.ELEMENT.forEach(element => quantity: regroupement.ELEMENT.QUANTITY ) ); } }); }
J'ai encore un souci sur cette ligne ci-dessous:

Code:

regroupement.ELEMENT.forEach(element => ????: regroupement.ELEMENT.QUANTITY )

Je dois créer une variable qui va lier regroupement.ELEMENT.QUANTITY dans mon HTML ? Si c'est le cas, où je dois créer ceci ?
Code:

1 2 <tr *ngFor="let line of lines"> <td scope="row" class="text-start"> {{ line. ??? }} </td>
Merci d'avance pour ta réponse

ce n'est pas du javascript :

Code:

quantity: regroupement.ELEMENT.QUANTITY

on t'as montré comment acceder à element, pourquoi tu m'ajoute quantiy: ........?

je te remet le code :
Code:

1 2 3 res.REGROUPEMENT.forEach(regroupement=> regroupement.ELEMENT.forEach(element => console.log(element) ); );
comment tu accede à quantity de element ?
c'est la base de la programmation !

une fois que tu auras reussi
tu pourra faire 2 ngfor dans le html sur le meme principe
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 data: any; getTitles(mode: PortfolioModeEnum): void { this.portfolioValue = 0; this.lines = []; this.service.getPortfolios(mode).pipe( takeUntil(this.unsubscribe$) ).subscribe((res: any) => { if (res.RETURNCODE === ApiResponseCodeEnum.Ok) { this.data = res; ); }
je commence le html, tu le completera :
Code:

1 2 3 4 <div *ngFor="let regroupement of data"> ... ...

Bonsoir,

Finalement, j'ai utilisé ce procédé pour récupérer les datas.

Ce n'est peut-être pas la meilleure des procédures mais ça fonctionne.

Merci encore pour votre aide.

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
getTitles(mode: PortfolioModeEnum): void {
    this.portfolioValue = 0;
 
    this.service.getPortfolios(mode).pipe(
      takeUntil(this.unsubscribe$)
    ).subscribe(res => {
      if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
 
          this.data = res.PORTFOLIO.REGROUPEMENT.map((regroupment) => {
            return regroupment.ELEMENT.map((element) => ({
              label: element.LABEL,
              quantity: element.QUANTITY,
              dev: element.INSTRCURRENCY,
              blockquantity: element.BLOCKQUANTITY,
              lastprice: element.LASTPRICE,
              averagedprice: element.AVERAGEDPRICE,
              pricevariation: element.PRICEVARIATION,
              accruedinterests: element.ACCRUEDINTERESTS,
              valorization: element.VALORIZATION,
              percentage: element.PERCENTAGE,	
              differeur: element.DIFFEREUR,
              currencyvalo: element.CURRENCYVALO,
              svm: element.SVM,
 
            }));
          }).flat();
 
          console.log(this.data)
 
      }
    });
  }