HttpClient GET transform response array of Objects

Question

Following is my model.

export interface AuditTrail {
    logAction:string,
    targetEmpId:string,
    createdDate:Date
}

Code below retrieves data from a GET call and transforms it.

  public getAuditTrails() {
   return this.http.get<AuditTrail[]>(this.auditTrailUrl)
    .pipe(
      map((data :Object[]) =>  {
        return data.map(value => {
          const auditTrail:AuditTrail = {
            logAction:value["logAction"],
            targetEmpId:value["targetEmpId"]["empCode"],
            createdDate:value["loggedDateTime"]
          }
          return auditTrail;
        });
    })
    )
  }

This code works alright. However my question is how can I avoid the array iteration data.map(value => {and use rxjs operators for the same.

The question is intended to improve my understanding of rxjs operators hence the solution should use rxjs operators.

sellmeadog · Accepted Answer · 2019-02-04 20:49:01Z

It depends on what you want to final return value to be, i.e., a stream of AuditTrail objects or a single AuditTrail[] array.

Stream:

public getAuditTrails(): Observable<AuditTrail> {
 return this.http.get<SomeObject[]>(this.auditTrailUrl).pipe(
   flatMap(data => data),
   map<SomeObject, AuditTrail>(value => ({
     logAction:value["logAction"],
     targetEmpId:value["targetEmpId"]["empCode"],
     createdDate:value["loggedDateTime"]
   })
 );
}

Above, flatMap is taking the source array and emitting each value as an item in a new observable stream allowing each individual item to be passed to a subsequent map.

Array:

If you want this to be reduced to an array, you can pipe toArray:

public getAuditTrails(): Observable<AuditTrail> {
 return this.http.get<AuditTrail[]>(this.auditTrailUrl).pipe(
   flatMap(data => data),
   map<SomeObject, AuditTrail>(value => ({
     logAction:value["logAction"],
     targetEmpId:value["targetEmpId"]["empCode"],
     createdDate:value["loggedDateTime"]
   }),
   toArray()
 );
}

Personally, I don't think there's any advantage to flat mapping and using map(data = data.map(...)) is fine.

Collectives™ on Stack Overflow

HttpClient GET transform response array of Objects

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related