HttpClient Angular 9 converting nested json to nested 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
}

Waylander · Accepted Answer · 2020-07-14 20:36:43Z

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>;
}

answered Jul 14, 2020 at 20:36

Waylander

7887 silver badges8 bronze badges

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

4 Comments

Alexandru Oroszi Over a year ago

so even if I do something similar with Object.assing(new Meeting(), meeting) I do get an instance of the class now but still the same issue on the Users part. I'm assuming I have to write a constructor that will convert the Users? Or like you pointed out use a library

Waylander Over a year ago

@AlexandruOroszi Indeed, Object.assign(new Meeting(), meeting) will not make meeting.users an array of actual User objects. The first code block in my answer has a constructor which maps the user array to an array of User objects. Both the constructor and library approach are valid.

Alexandru Oroszi Over a year ago

That's what I thought. Perfect, thank you. I'll put this as the accepted answer. If you have any time and can name a few libraries to choose from to do these conversions just so I can browse I would greatly appreciate it. Cheers.

Waylander Over a year ago

I recently did some comparing of these libraries and chose between these contenders: TypedJSON, class-transformer, cerialize.

Collectives™ on Stack Overflow

HttpClient Angular 9 converting nested json to nested object

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related