In my Angular/Typescript code, I have a nested object array that I am trying to return(filter) based on if the object property has the value === ‘event’.
I don’t know what I’m missing but for some reason it won’t return the nested object array but instead keeps telling me my variable is of type CalendarModel[] which is the parent?
I added :{types}
to the variables/filters to show you what angular tells me the variables types are
getAllEvents: Signal<CalendarModel[]> = computed(() => this.dataService.allInformation()?.allCalendarInformation?.filter(calendar: CalendarModel => calendar?.events?.filter(event: CalendarEvent=> event.type === 'event').filter(event: CalendarEvent => {
return new Date(event.date).getTime() >= new Date().setHours(0, 0, 0, 0);
}))
);
Here is my model Structure:
allCalendarInformation: CalendarModel[];
export interface CalendarModel {
date: Date;
events: CalendarEvent[];
}
export interface CalendarEvent {
imageUrl?: string
title: string;
date?: Date;
location?: string;
time?: string;
description: string;
type?: string;
featured?: boolean;
}
Am I missing something?
I’m drilling down into events and trying to get all the events that have the type === 'event'
but Typescript keeps telling me my overall objects getAllEvents
is of type CalendarModel[]
? Shouldn’t it be CalendarEvent[]
?
Please help me understand what I am doing wrong.
I have multiple other filtered objects throughout my project and they work but I’m doing something wrong here.
2
Answers
This is because the filter method is operating on top of CalendarModel which is an array array. You have to apply some reducer or map and make this array have a single dimension.
Then, once you have this single array, you can filter the object by the type property.
Iterate all
CalendarModel
objects and combine theCalendarEvent
into an array via.reduce()
.Filter the
CalendarEvent
object bytype
anddate
.Demo @ StackBlitz