Angular/RxJS type error when mapping observable

Question

I am getting the following error when trying to map a resposne from my api

Argument of type 'OperatorFunction<{ results: CustomerShipment[]; },{ title: string; start: Date; }[]>' 
is not assignable to parameter of type 'OperatorFunction<CustomerShipment[], {title:string; start: Date;}[]>'. 
Type '{ results: CustomerShipment[]; }' is missing the following properties from type 'CustomerShipment[]':
length, pop, push, concat, and 26 more.

API which returns a JSON array of objects with the following schema… I use Angular-Calendar v0.28.28

{
    "0": {
        "customerId": 1234,
        "customer": "test",
        "items": [
           id: 123,
           tssNumber: "1234567"
           containerNumber: "e.g.",
           appointmentTime: "23/03/2022 12:00 p.m."
        ]
    }
}

An angular calendar event has the following required properties: start: Date, title: string. I am trying to map the response from my API to the CalendarEvent object :

events$: Observable<CalendarEvent<{ results: CustomerShipment }>[]>;

ngAfterViewInit(): void 
{
   this.fetchCustomers(formatDate(this.viewDate, 'yyyy-MM-dd', 'en'));
}

fetchData(day: string): void {
let params = new HttpParams();
params = params.append('userid', this.getUserId());
params = params.append('date', day);
 this.events$ = this.calendarService.getDailyCalendarShipments(params)
   .pipe(
      map(({ results }: { results: CustomerShipment[] }) => {
        return results.map((result: CustomerShipment) => {
          return {
            title: result.customer,
            start: new Date()
          };
        });
   }));
}

then in the HTML component

<div class="container-fluid">
  <div #scrollContainer class="scroll-container" *ngIf="events$ | async; else loader; let events">
    <app-day-view-scheduler (eventTimesChanged)="eventTimesChanged($event)"
                            (userChanged)="userChanged($event)"
                            [events]="events"
                            [headers]="headers"
                            [viewDate]="viewDate">
    </app-day-view-scheduler>
  </div>
</div>

I can do this without using the Observable, but I want to use the angular async pipe.

I'm using the following example: https://mattlewis92.github.io/angular-calendar/#/async-events

Saptarsi · Accepted Answer · 2022-03-23 17:09:19Z

1

getDailyCalendarShipments returning array of type CustomerShipment

Used from to emit data in sequence and mergeMap to subscribe this

inside map creating your event of type { results: CustomerShipment }

toArray creating { results: CustomerShipment }[]

this.events$ = this.calendarService.getDailyCalendarShipments(params).pipe(
  mergeMap(({ results }: { results: CustomerShipment[] }) => {
    return from(results);
  }),
  map((result: CustomerShipment) => {
    return {
      title: result.customer,
      start: new Date(),
    };
  }),
  toArray()
);

answered Mar 23, 2022 at 17:09

Saptarsi

8887 silver badges17 bronze badges

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

2 Comments

Jacob Over a year ago

Okay, this fixes the error if I use Observable<CalendarEvent[]>, but I have issues when I try to access a sub array inside CustomerShipment. Each CustomerShipment can contain an array of items. I want to map that array of items into the return result. But when I do a separate map for it, there is once again an error:

error TS2322: Type 'Observable<(void | CalendarEvent<any>)[]>' is not assignable to type 'Observable<CalendarEvent<any>[]>'.

Jacob Over a year ago

I posted this issue in a new question: stackoverflow.com/questions/71600939/…

Amer · Accepted Answer · 2022-03-23 14:53:24Z

0

You need either to change the type of the events$ Observable to be Observable<CalendarEvent<CustomerShipment>[]>, or change the map operator output to be CalendarEvent<{ results: CustomerShipment }>[] like the following:

this.events$ = this.calendarService.getDailyCalendarShipments(params).pipe(
  map(({ results }: { results: CustomerShipment[] }) => ({
    results: results.map((result: CustomerShipment) => ({
      title: result.customer,
      start: new Date(),
    })),
  }))
);

answered Mar 23, 2022 at 14:53

Amer

6,7442 gold badges11 silver badges36 bronze badges

1 Comment

Jacob Over a year ago

I've tried this but I more or less get the same error. The calendarService.getDailyCalendarShipments(params) returns Observable<CustomerShipment[]> if it helps

Collectives™ on Stack Overflow

Angular/RxJS type error when mapping observable

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related