Delving into the realm of Angular on my own has been quite an enlightening journey, but I'm currently facing a specific issue: My aim is to create a website using both Spring for the back end and Angular 7 for the front end.
However, I've encountered a roadblock.
At present, I have three entities: Builder, Category, and Ship.
Naturally, my ship entity includes attributes such as the builder of the ship and its category (e.g. hunter).
Upon making a request to my service (Vaisseau.service.ts), he hands me JSON:
{
"_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
}
}
The following function encapsulates this :
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();
}
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);
});
}
In my template file, there's a snippet that displays vessels, but unfortunately, an error pops up:
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
This error prevents me from accessing the ship's builder and category information.... With the included JSON:
"vaisseau" : {
"href" : "http://localhost:8080/vaisseaus/2"
}
I've scoured Google in search of various methods to parse the JSON (interfaces in Angular, or constructors that take JSON arrays as parameters...)
I can't seem to pinpoint the source of my issue... Is it on the backend where I need to tweak parameters for my REST API to always return all data instead of just links pointing to entities? Or perhaps in Angular where I should handle loading different objects from these links?
Despite following numerous online tutorials, I'm still unsure about the most efficient way to tackle this JSON data - Interfaces, Mappers, or other approaches...