I have been working on an angular2 project where I am utilizing the http module to send a GET request. The server responds with an object that seems to be deserialized correctly into its corresponding TypeScript object. However, when I attempt to access a property from this object, it returns undefined. Strangely, when I check the console right before accessing these properties, the data is clearly present.
Below is how my getDataForEmployee method looks like:
getDataForEmployee(data){
var url = this.active+"/guest/"+data;
var headers = new Headers();
headers.append("Content-Type", "application/json");
return this.http
.get(url, {headers:headers})
.toPromise()
.then((res:Response)=> res.json() as Employee);
}
This is the method responsible for handling the response:
this.employeeHttp.getDataForEmployee(userid)
.then((employee:Employee)=>{
console.log(employee);
console.log("firstname: "+employee.firstName);
...
Here is the structure of the Employee class:
export class Employee {
...
private _firstName:string;
...
get firstName(): string {
return this._firstName;
}
set firstName(value: string) {
this._firstName = value;
}
...
}
The screenshot displays the console output during this request. https://i.sstatic.net/7VVbd.png
I am puzzled as to why the firstName property returns undefined even though it exists in the object moments before. Any insights into this issue would be greatly appreciated.