Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How do I return a nested object array using a Signal in Angular/Typescript?

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.

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    1. Iterate all CalendarModel objects and combine the CalendarEvent into an array via .reduce().

    2. Filter the CalendarEvent object by type and date.

    getAllEvents: Signal<CalendarEvent[]> = computed(() =>
  this.dataService.allInformation()
    ?.allCalendarInformation
    ?.reduce(
      (acc: CalendarEvent[], cur: CalendarModel) => [...acc, ...cur.events],
      [] as CalendarEvent[]
    )
    .filter(
      (event: CalendarEvent) =>
        event.type === 'event' &&
        event.date &&
        new Date(event.date).getTime() >= new Date().setHours(0, 0, 0, 0)
    ))
);

    Demo @ StackBlitz

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search