0

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

Jacob
  • 371
  • 2
  • 18

2 Answers2

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()
);
Saptarsi
  • 796
  • 5
  • 13
  • Okay, this fixes the error if I use `Observable`, 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)[]>' is not assignable to type 'Observable[]>'.` – Jacob Mar 24 '22 at 10:08
  • I posted this issue in a new question: https://stackoverflow.com/questions/71600939/rxjs-angular-error-when-mapping-sub-array-in-observables – Jacob Mar 24 '22 at 10:42
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(),
    })),
  }))
);
Amer
  • 6,162
  • 2
  • 8
  • 34
  • I've tried this but I more or less get the same error. The `calendarService.getDailyCalendarShipments(params)` returns `Observable` if it helps – Jacob Mar 23 '22 at 15:22