Why is this Angular class property undefined?

Question

I am currently working on a Angular project that makes it possible to create lobbies for different web games. The idea is that the application already gathers players so a web game can be started immediately.

But right now I am running into a problem that is caused by getting data from my Springboot Java API. The Angular application gets the data correctly but when i try to convert the observable into a normal Game[] after subscribing ofcourse. It makes all the properties of the elements in the Game[] undefined. What is causing this to happen?

The Game Service:

//Returns a list of all games known to 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[];
 //Get all games known to the API
    this.gameService.getAllGames().subscribe( elements => this.games = elements )
 //This doesn't work all the elements of this.games are undefined.

I have also tried to work with a foreach of the array that gets returned. With no effect either

 games: Game[];
//Get all games known to 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 GetRequest

[
    {
        "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
    }
]

Stijn Groenen · Accepted Answer · 2019-11-06 14:50:24Z

4

The properties in your JSON response start with a lowercase.
In your Game class, you use properties that start with an uppercase.
I believe the parsing from JSON to a typescript object is case sensitive. Could you try to change the first letter of your properties to lowercase?

answered Nov 6, 2019 at 14:50

Stijn Groenen

562 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joep Verhoeven Over a year ago

You were right typescript is indeed case sensitve when parsing JSON into objects. I also found out my Game[] wasn't initialized either. So I changed it into a Set<Game>. But anyways thank you very much.

Collectives™ on Stack Overflow

Why is this Angular class property undefined?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related