1 pièce(s) jointe(s)
Lecture d'un champ dans un JSON renvoie l'erreur "data.field.map is not a function"
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:
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:
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:
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) :
Pièce jointe 624669
Merci d'avance si vous prenez le temps de m'aider
