Currently, I am working on an Angular project that aims to create lobbies for various web games. The concept is to gather players through the application so that a web game can be initiated quickly.
However, I have encountered an issue where data retrieved from my Spring Boot Java API is causing problems in my Angular application. While the application successfully fetches the data, converting the observable into a normal Game[] after subscribing results in all properties of the elements becoming undefined. What could be the root cause of this problem?
The Game Service:
//Returns a list of all games available in the API
getAllGames(): Observable<Game[]>
{
return this.httpClient.get<Game[]>(this.connectionService.getConnectionString() + "/games", this.httpOptions)
}
The Game class:
export class Game {
public Id: String;
public Name: String;
public RedirectURI: String;
public MinUserCount: Number;
public MaxUserCount: Number;
constructor(Id: String, Name: String, RedirectURI: String, MinUserCount: Number, MaxUserCount: Number)
{
this.Id = Id;
this.Name = Name;
this.RedirectURI = RedirectURI;
this.MinUserCount = MinUserCount;
this.MaxUserCount = MaxUserCount;
}
}
The Component:
games: Game[];
//Retrieve all games available in the API
this.gameService.getAllGames().subscribe(elements => this.games = elements )
//Unfortunately, all elements within this.games end up being undefined.
I have also attempted to use a forEach loop with the returned array, but it did not yield any positive results either.
games: Game[];
//Retrieve all games available in the API
this.gameService.getAllGames().subscribe(elements => {
elements.forEach(item => {
var game = new Game(item.Id, item.Name, item.RedirectURI, item.MinUserCount, item.MaxUserCount)
this.games.push(game)
})
})
The JSON Result for the Get Request
[
{
"name": "QuizGame",
"id": "dg217d65126b5e31v6d5v5d15v564d",
"maxUserCount": 4,
"redirectURI": "http://localhost:8082",
"minUserCount": 1
},
{
"name": "RPG",
"id": "dt76TQWR127367125SDYATFHa32615",
"maxUserCount": 10,
"redirectURI": "http://localhost:8083",
"minUserCount": 0
},
{
"name": "Scribble Clone",
"id": "378167e86dsahdgahkj312DJKHDg2d",
"maxUserCount": 9,
"redirectURI": "http://localhost:8084",
"minUserCount": 1
},
{
"name": "WebPonker",
"id": "0o00dhsnvkjzbcxhgjyg23v2gh3dvg",
"maxUserCount": 4,
"redirectURI": "http://localhost:8085",
"minUserCount": 4
}
]