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