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

**Tamzoro** · 19/02/2022, 11h57

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 :

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
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 :

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
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.

**krakatoa** · 19/02/2022, 12h49

Code :

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

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 ?

**Tamzoro** · 19/02/2022, 15h03

Hello,

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

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 :

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

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

**dukoid** · 19/02/2022, 16h09

et ça ?

Code :

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

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 :

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

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

**Tamzoro** · 19/02/2022, 16h57

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

**Tamzoro** · 19/02/2022, 17h08

@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

**krakatoa** · 19/02/2022, 18h10

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 :

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

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 :

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

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

**Tamzoro** · 19/02/2022, 22h44

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 :

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
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 :

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

 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 :

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

1
2
<tr *ngFor="let line of lines">
        <td scope="row" class="text-start"> {{ line. ???  }} </td>

Merci d'avance pour ta réponse

**krakatoa** · 19/02/2022, 23h08

ce n'est pas du javascript :

Code :

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

 quantity: regroupement.ELEMENT.QUANTITY

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

je te remet le code :

Code :

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

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 :

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

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 :

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

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

**Tamzoro** · 21/02/2022, 00h15

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 :

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

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

Angular

Discussions similaires

Partager

Partager