Discussion :

[vincent922]

Bonjour tout le monde,

Je d�veloppe une application Web en Typescript et j'ai un backend ainsi qu'un frontend. Jusqu'� pr�sent, j'avais d�fini un mod�le de donn�es dans le frontend et un autre dans le backend. J'ai r�cemment cr�� un mod�le de donn�es que je veux partager entre mon frontend et mon backend.

Je pensais avoir r�ussi mais lorsque j'essaie de faire un .map sur certains des champs de mon JSON, ma page web me renvoie une page blanche avec une erreur dans la console web disant : my_json_object.some_field.map is not a function

Dans mon mod�le de donn�es partag�, j'ai :

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
 
export interface SubSubObject {
    some_sub_sub_field1: string;
}
 
export interface SubObject {
    some_sub_field1
    some_sub_field2: SubSubObject[]
}
 
export interface MyObject {
    field1: (SubObject & { name: string })[]
}
 
export class MyObjectBuilder {
 
    public readonly field: BuildMyStrangeField;
 
    constructor(fieldInParameter:MyObject) {
        this.field = new BuildMyStrangeField(fieldInParameter?.field1);
    }
}
 
export class BuildMyStrangeField {
    private field: (SubObject & { name: string })[] | undefined;
 
    constructor(fieldInParameter?: (SubObject & { name: string })[]) {
        if(fieldInParameter !== undefined) {
            this.field = fieldInParameter
        } else {
            this.field = undefined
        }
    }
 
    public getField(): (SubObject & { name: string })[] | undefined {
        if(this.field) {
            return this.field;
        } else {
            return undefined;
        }
    }
}
 
export function buildObjectInBackendToFrontend(fields: AnObjectContainingMyResponse): MyObject {
  const final_result:MyObject = new MyObject(fields.theFieldI'mInterestingIn);
  return final_result;
}

Mon interface est compos� d'un JSON compos� d'un champ lui-m�me compos� d'une autre interface qui elle-m�me est compos� en partie d'une autre interface.

J'ai simplifi� la structure dans l'exemple ci-dessus mais j'ai �videmment beaucoup plus de champs dans chacun de mes JSON.

J'appelle ensuite ma fonction buildObjectInBackendToFrontend() dans une des routes d�finies dans mon backend. Cette fonction va formater l'objet envoy� au frontend � la bonne forme, du moins c'est ce que je voudrai.

C�t� frontend, je veux ensuite cr�er un tableau pour visualiser mes donn�es. Pour ce faire, j'essaie de faire un .map sur mes donn�es pour traiter chaque �l�ment du tableau re�u.

J'ai �crit la fonction suivante pour cr�er ce tableau :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
 
function renderTableData() {
        if(data !== undefined){
            return data.field.map((currentData, index) => {
                console.log(currentData.field1);
                return (
                    <> 
                           ....
                    </>
                )
        })} else{return undefined}
}

Lorsque j'affiche data dans la console web, je vois que mon objet est bien rempli et contient les bonnes donn�es.

Mais la ligne data.field1.map renvoie toujours l'erreur suivante dans la console web : TypeError : data.field1.map n'est pas une fonction

Si j'essaie d'afficher dans la console web la valeur d'un des sous-champs de l'objet : console.log(data.field1[0].some_sub_field1), la console web renvoie TypeError : Cannot read properties of undefined (reading 'some_sub_field1'), cependant, le sous-champ "some_sub_field1" contient bien une valeur.

Pour r�soudre ce probl�me, j'ai essay� de r�assigner l'objet re�u c�t� front-end � une nouvelle variable sous forme de tableau :

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
 
function renderTableData() {
        if(data !== undefined){
            const reassignedValue: any[] = [];
            let i:number;
            for (i = 0; i < data?.field1.length; i++) {
                reassignedValue.push(data?.field1[i]);
            }
            return reassignedValue.map((currentData, index) => {
                return (
                    <> 
                           ....
                    </>
                )
        })} else{return undefined}
}

Avec cette m�thode, je n'ai plus d'erreurs dans ma console web mais la variable reassignedValue nouvellement cr��e est vide lorsque j'essaie de l'afficher dans la console web apr�s l'avoir initialis�e.

Lorsque j'affiche le field1 de ma donn�e dans la console web j'obtiens ceci : (j'ai chang� les noms des champs pour qu'ils correspondent � ceux que j'ai mis dans le post et les rectangles noirs sont juste pour cacher certaines donn�es) :


Merci d'avance si vous prenez le temps de m'aider