My current challenge involves retrieving a MongoDB document from my database using a get request. I have successfully tested the URL via Postman and it returns the document as expected, indicating that the issue lies within the frontend rather than the server. When attempting the same operation on the frontend, the data is retrieved and stored in the variable res, which is then assigned to this.englishteam for access outside the GetSingleEnglishTeam function scope.
public teamenglish!: EnglishTeam;
GetSingleEnglishTeam(_id: string) {
this.englishTeamService.GetSingleEnglishTeam(_id).subscribe((res)=> {
console.log("The team: "+ res);
this.teamenglish = res;
// console.log(this.teamenglish);
})
}
However, upon trying to access the ClubName stored in teamenglish, an undefined error occurs:
ERROR TypeError: Cannot read property 'ClubName' of undefined at ClubHonoursComponent_Template (club-honours.component.html:9)
Club-honours.component.html
<div class="row">
<div class="column">
<div class="PremierLeagues" >
{{teamenglish.ClubName}}
</div>
</div>
Get Request to the Server
GetSingleEnglishTeam(_id: string){
console.log( "ID is "+ _id);
return this.http.get<EnglishTeam>('http://localhost:3000/api/getTeamEn/' + `${_id}`);
}
Upon console logging the variable containing the JSON object, [Object Object] is displayed.
My objective is to send a getOne request to the server and have it return the single document. Can anyone identify where I may have made a mistake?