Convertion de JSon en object TypeScript Angular
Bonjour,
J'apprends en autodidacte le merveilleux monde d'Angular, mais je rencontre actuellement un probl�me :
Je d�sire r�aliser un site web et pour ce faire j'utilise en back Spring et en front Angular 7.
Et la, j'ai un souci.
J'ai actuellement 3 entit�s : le constructeur, la cat�gorie et le vaisseau.
Et mon vaisseau a bien entendu un attribut constructeur (le constructeur du vaisseau) et une cat�gorie (chasseur ...).
Apr�s demande � mon service. (vaisseau.service.ts)
Code:
1
2
3
4
5
6
7
8
| public host = 'http://localhost:8080';
constructor(private httpClient: HttpClient) {
}
public getVaisseaux(page: number, size: number) {
return this.httpClient.get(this.host + '/vaisseaus?page=' + page + '&size=' + size);
} |
il me retourne le JSon suivant :
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
| {
"_embedded" : {
"vaisseaus" : [ {
"nom" : "nomVaisseau",
"description" : "Description du vaisseau",
"image" : "http://127.0.0.1/img/Vaisseaux/2.jpg",
"_links" : {
"self" : {
"href" : "http://localhost:8080/vaisseaus/2"
},
"vaisseau" : {
"href" : "http://localhost:8080/vaisseaus/2"
},
"constructeur" : {
"href" : "http://localhost:8080/vaisseaus/2/constructeur"
},
"categorie" : {
"href" : "http://localhost:8080/vaisseaus/2/categorie"
},
"utilisateurs" : {
"href" : "http://localhost:8080/vaisseaus/2/utilisateurs"
}
}
} ]
},
"_links" : {
"self" : {
"href" : "http://localhost:8080/vaisseaus{&sort}",
"templated" : true
},
"profile" : {
"href" : "http://localhost:8080/profile/vaisseaus"
},
"search" : {
"href" : "http://localhost:8080/vaisseaus/search"
}
},
"page" : {
"size" : 5,
"totalElements" : 1,
"totalPages" : 1,
"number" : 0
}
} |
que j'appelle ainsi :
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
| public constructeurs: any;
public pages: Array<number>;
private currentPage = 0;
private size = 2;
private totalPages: number;
private currentKeyword = '';
constructor(private constService: ConstructeurService, private router: Router) {
}
ngOnInit() {
this.onGetConstructeurs();
}
/**
* Méthode qui permet de récupérer la liste des constructeurs
* selon la page et le nombre de constructeur qu'elle peut contenir
*/
onGetConstructeurs() {
this.constService.getConstructeurs(this.currentPage, this.size)
.subscribe(data => {
this.constructeurs = data;
this.totalPages = data['page'].totalPages;
this.pages = new Array<number>(this.totalPages);
}, err => {
console.log(err);
});
} |
et dans mon template :
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
| <table *ngIf="vaisseaux" class="table">
<!-- Si il n'y a pas de vaisseaux en BDD n'affiche pas le tableau-->
<thead class="thead-dark">
<tr>
<th scope="col">Vaisseau</th>
<th scope="col">Nom</th>
<th scope="col">Constructeur</th>
<th scope="col">Catégorie</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let p of vaisseaux._embedded.vaisseaus">
<td class="col-md-2 align-middle"><img src="{{p.image}}"></td><!-- {{p.image}} -->
<td class="col-md-2 align-middle text-center">{{p.nom}}</td>
<td class="col-md-2">{{p.constructeur.nom}}</td>
<td class="col-md-2">{{p.categorie.nom}}</td>
<td class="col-md-2 align-middle text-center">
<a (click)="voirVaisseau(p)" class="btn btn-primary"><i aria-hidden="true"
class="fa fa-plus-circle"></i></a>
<a (click)="onEditVaisseau(p)" class="btn btn-warning m-2">Modifier</a>
<a (click)="onDeleteVaisseau(p)" class="btn btn-danger">Supprimer</a></td>
</tr>
</tbody>
</table> |
et l'erreur suivante appara�t :
Code:
1
2
3
4
5
6
7
8
9
10
| ERROR TypeError: "_v.context.$implicit.constructeur is undefined"
View_LstVaisseauComponent_3 LstVaisseauComponent.html:35
Angular 29
RxJS 5
Angular 9
LstVaisseauComponent.html:34:56
View_LstVaisseauComponent_3 LstVaisseauComponent.html:34
Angular 15
RxJS 5
Angular 9 |
Je n'arrive donc pas � avoir le constructeur du vaisseau comme sa cat�gorie ....
J'ai regard� sur Google et autre les diff�rentes fa�ons de charger le JSon (via des interfaces dans Angular, ou des constructeurs qui prennent en param�tre le Json qui est parcouru comme un tableau ...)
Mais rien avec des
Code:
1
2
3
| "vaisseau" : {
"href" : "http://localhost:8080/vaisseaus/2"
}, |
Comme si c��tait charger en lazy ...
Je ne comprends pas d'o� vient mon probl�me ... Du cot� du Back o� il faut que je donne des param�tres � mon REST pour qu'il envoie � chaque fois toutes les informations et non des liens qui pointent vers ou c'est � Angular de charger les diff�rents object en chargent � partir des liens ?
Merci d'avance pour toute aides ^^.
