TypeError: Cannot read property 'map' of undefined : firebase with angular calendar

Question

Im trying to use firebase with angular calendar. I need to rename my variable but I'm not able to make it work with async event. Here is what i have.

CALENDAR SERVICE

 getUserWorkout(){ return this.afAuth.authState.pipe( switchMap(user => { if (user) { return this.db.collection<Workout>('workout', ref => ref.where('uid', '==', user.uid).orderBy('date') ).valueChanges({ idField: 'id' }); } else { return []; } }), ); } }

CALENDAR COMPONENT

 import { WorkoutService } from '../workout.service'; import { Workout } from '../workout.model'; function getTimezoneOffsetString(date: Date): string { const timezoneOffset = date.getTimezoneOffset(); const hoursOffset = String( Math.floor(Math.abs(timezoneOffset / 60)) ).padStart(2, '0'); const minutesOffset = String(Math.abs(timezoneOffset % 60)).padEnd(2, '0'); const direction = timezoneOffset > 0? '-': '+'; return `T00:00:00${direction}${hoursOffset}:${minutesOffset}`; } export const colors: any = { red: { primary: '#ad2121', secondary: '#FAE3E3', }, blue: { primary: '#1e90ff', secondary: '#D1E8FF', }, yellow: { primary: '#e3bc08', secondary: '#FDF1BA', }, }; @Component({ selector: 'app-workout', changeDetection: ChangeDetectionStrategy.OnPush, templateUrl: './workout.component.html', styleUrls: ['./workout.component.scss'] }) export class WorkoutComponent implements OnInit { view: CalendarView = CalendarView.Month; workout: Workout[]; sub: Subscription; viewDate: Date = new Date(); events$: Observable<CalendarEvent<{ workout: Workout }>[]>; activeDayIsOpen: boolean = false; constructor(public workoutService: WorkoutService) { } ngOnInit(): void { this.fetchEvents(); } public fetchEvents(): void { const getStart: any = { month: startOfMonth, week: startOfWeek, day: startOfDay, }[this.view]; const getEnd: any = { month: endOfMonth, week: endOfWeek, day: endOfDay, }[this.view]; this.events$ = this.workoutService.getUserWorkout(). pipe( map(({ results }: { results: Workout[] }) => { return results.map((workout: Workout) => { return { title: workout.name, start: new Date( workout.date + getTimezoneOffsetString(this.viewDate) ), color: colors.yellow, allDay: true, }; }); }) ); }

I keep getting this error and I can't figure it out.

 TypeError: Cannot read property 'map' of undefined
    at MapSubscriber.project (workout.component.ts:108)
    at MapSubscriber._next (map.js:29)
    at MapSubscriber.next (Subscriber.js:49)

thank you ps i know this is a common error but i cant seem to find any good explanation

Answer 1

I had the same issue and I changed the syntax from:

map(({ results }: { results: Workout[] }) => { ...

to:

map((results: Workout[] ) => { ...

Then my JSON from the api was mapped as normal.