How do I use rxjs map to mutate data in object before casting a new type from an object gotten from a HttpClient request?

Issue

Hope the title isn't too specific.

The back-end I am working with returns Dates as a string. I have a function to convert that string to a javascript Date object. I use a Rxjs map to convert the json response to my Typescript objects like so.

  getAllRecordsByEmployeeId(employeeId: number): Observable<Record[]> {
    return this.http.get<Record[]>(
        this.basePath
        + this.recordPath
        + this.recordEmployeeIdParam
        + employeeId,
        this.httpOptions)
        .pipe(
            map((res: any) => res.records as Record[]),
        );
  }

I want to mutate res.records.startDate with a function before it gets turned into a Record object. How can I accomplish this?

Solution

getAllRecordsByEmployeeId(employeeId: number): Observable<Record[]> {
    return this.http.get<Record[]>(

I understand, that your http request does not actually return a Record array. It returns an object with a Record Array field, which is basically another Record model. It is very similar, but it's a different model.

Please consider changing it to:

interface RecordFromApi extends Record {
  startDate: string; // overwrite attribute
}

interface RecordResponse {
  records: RecordFromApi[];
}

getAllRecordsByEmployeeId(employeeId: number): Observable<Record[]> {
    return this.http.get<RecordResponse>(
        this.basePath
        + this.recordPath
        + this.recordEmployeeIdParam
        + employeeId,
        this.httpOptions)
        .pipe(
            map((res: RecordResponse) => res.records.map(record => mapRecord(record))), // mapRecord is a custom function which maps RecordFromApi model to Record model
        );
  }

Answered By - MoxxiManagarm