angular with webApi - Models first letter should be uppercase or lowercase

Issue

very much new to angular and facing this issue where my result from Webapi model's first letter is upper-case even though my angular model's first letter is lower-case.

User.ts

    export interface User extends ICommon {
        id: string;
        firstName: string;
        lastName: string;
    }

User.service.ts

     public getActiveUsers(): Observable<User[]> {
      return this.http
       .get<User[]>(baseUrl + "user/GetUserlist");

}

Console. output shows:

User.component.html

    {{user.firstName}}  => shows no result
    {{user.FirstName}}  => shows proper result

User.component.ts

    let result = this.user.firstName => undefined
    let result = this.user.FirstName => compile time error.

what am i doing wrong here? i am confused.

Solution

It happens because the server uses PascalCasing, and you defined an interface which does not match the data returned by a server.

Change your interface as

export interface User extends ICommon {
        Id: string;
        FirstName: string;
        LastName: string;
}

and access as

let result = this.user.FirstName  

If your backend is WebApi, by default the normal Json serialization leaves the fields as they are in you c# casing.

Answered By - Sajeetharan