angular model objects not mapped correctly

Question

I am invoking a REST API and returning Observable<User[]> as follows:

User.service.ts

@Injectable({
  providedIn: 'root'
})
export class UserService {

  constructor(private httpClient:HttpClient) { }

  getAllUsers():Observable<User[]>{
    return this.httpClient.get<User[]>('https://jsonplaceholder.typicode.com/users');
  }
}

In My component class, I am subscribing to and assigning to the instance variable:

UserComponent.ts

private users:User[];
constructor(private userService:UserService) { }

  ngOnInit() {
    this.userService.getAllUsers()
     .subscribe(users => this.users = users) 
 }

I have also created my model class User.ts

export class User{

    constructor(
        private _id:number,
        private _username:string,
        private _email:string,
        private _phone:string
    ){}

    get id():number{return this._id;}
    set id(id:number){this._id = id;}

    get username():string{return this._username;}
    set username(username:string){this._username = username;}

    get email():string{return this._email;}
    set email(email:string){this._email = email;}

    get phone():string{return this._phone;}
    set phone(phone:string){this._phone = phone;}
}

The below are my questions:

1. When I print the this.users inside the ngOnInit method after fetching the users from the service, I am also getting all the properties which are not mapped in my User.ts class. example: address, website etc.

2. Is this behavior correct, as I am getting typescript support to call only the properties defined in the model class inside the component, but able to see all the properties while printing.

3. Is there a way to fetch only the properties from the service, since, my application might want only a subset of data from the service and I do not want to load the entire json data into the component?

Is there something I am missing here.

Answer 1

Yes, this is correct behavior.

When you use a generic type on the httpClient.get method you are casting the result to that type, not constructing an instance of the class.

As far as only getting the fields you need returned to you goes, this will depend on the API you are calling to.

The json placeholder API used in your example does not support this.

If you want the objects in your component to be instances of the Users class, you can instantiate the class when you assign them:

 ngOnInit() {
    this.userService.getAllUsers()
     .subscribe(users => this.users = users.map(user => new User(
        user.id,
        user.username,
        user.email,
        user.phone
      )
    )) 
 }