HttpClient Angular 9 将嵌套的 json 转换为嵌套的 object

Question

I'm trying to see if there's a more elegant way other than using map to accomplish the following:

I have a class with an array of another object. So my Meeting object has many users:

import { User } from './user';

export class Meeting {
  _id?: string;
  name: string;
  roomSid?: string;
  users: User[];
  contentList: any;
  startDate: Date;
  endDate: Date;
  createDate: Date;
}

export class User {
  _id: string;
  firstName: string;
  lastName: string;
  dealerName: string;
  location: string;
  role: 'attendee' | 'host' | 'participant';
  videoServiceId: string;
  profilePic?: string;
  __v?: string;

  get isHost(): boolean {
    return this.role === 'host';
  }

  get isAttendee(): boolean {
    return this.role === 'attendee';
  }

  get isParticipant(): boolean {
    return this.role === 'participant';
  }

  get isClient(): boolean {
    return this.isAttendee || this.isParticipant;
  }
}

When I do:

this.httpClient
      .get<Meeting>(`${this.apiUrl}${meetingId}`)
      .pipe(
        catchError(this.handleError));

without using map to convert the received result from the get, the User object array is getting set incorrectly. My getters are undefined unless I do a Object.assign(new User, user). HttpGet returns the Meeting as a Meeting class just fine, just not the objects inside.

Is there something I'm missing or is this working as intended and I have no choice but to use map(). Although I feel that if I have another Object inside my User class, then things could get a bit messier.

For reference here is a response from the server:

{
    "users": [
        {
            "_id": "971c4160-c60c-11ea-8505-dff43e61059c",
            "firstName": "alex",
            "lastName": "oroszi",
            "dealerName": "here",
            "location": "here",
            "role": "attendee",
            "videoServiceId": "PA634a9331a9cad648bb6e6dbcea8e49a0"
        }
    ],
    "contentList": [],
    "_id": "5f0a005b627fb647f519118b",
    "name": "Room1",
    "startDate": "2020-07-11T16:00:00.000Z",
    "endDate": "2020-07-11T17:00:00.000Z",
    "createDate": "2020-07-11T18:09:31.016Z",
    "__v": 0
}

Answer 1

When specifying .get<Meeting>(`${this.apiUrl}${meetingId}`) you're letting TypeScript know that the get method will return a Meeting object which is not the case. If you check the result of your method with data instanceof Meeting it will return false. You will need to create a meeting object and populate it with the data received from the request.

The easiest way to do this without any libraries will probably be as follows.

export class Meeting {
  _id?: string;
  name: string;
  roomSid?: string;
  users: User[];
  contentList: any;

  constructor(data) {
    this._id = data._id;
    this.name = data.name;
    this.roomSid = data.roomSid;
    this.users = data.users.map(user => new User(user));
    this.contentList = data.contentList;
    // ...
  }
}

export class User {
  _id: string;
  firstName: string;
  lastName: string;
  dealerName: string;
  location: string;
  role: 'attendee' | 'host' | 'participant';
  videoServiceId: string;
  profilePic?: string;
  __v?: string;

  constructor(data) {
    this._id = data._id:
    this.firstName = data.firstName:
    // ...
  }

  get isHost(): boolean {
    return this.role === 'host';
  }

  get isAttendee(): boolean {
    return this.role === 'attendee';
  }

  get isParticipant(): boolean {
    return this.role === 'participant';
  }

  get isClient(): boolean {
    return this.isAttendee || this.isParticipant;
  }
}

function getMeeting(meetingId): Observable<Meeting> {
  this.httpClient.get<Meeting>(`${this.apiUrl}${meetingId}`)
    .pipe(
      catchError(this.handleError),
      map(meeting => new Meeting(meeting)),
    );
}

The downside of this approach is the DRYness as the property name is repeated three times. An alternative is solutions such as TypedJson which allow you to serialize and deserialze objects with help of decorators. Quick example of a model in TypedJSON:

@jsonObject
class Meeting {

    @jsonMember
    _id: string;
    
    @jsonArrayMember(User)
    users: Array<User>;
}