title: Filtering item from nested object array in typescript
body: <p>I have looked for a while now for examples but I can't find anything similar and my understanding of the filter function is lacking, any help is much, much appreciated. I'm trying to remove elements from the object where the nested items label === undefined.</p>
  
  <pre><code>this.items = [ // main MenuItem[] object (contains entire menu)
    {
      label: this.headingLabel, visible: this.booleanPipe.transform(this.labelVisible),
      items: [ // headings of the menu sit in navbar, a MenuItem[][] two dimensional array
        [
          {
            label: this.subMenuLabel, visible: this.booleanPipe.transform(this.labelVisible), separator: true,
            items: [ // items that need to be removed if they are undefined, another MenuItem[] object, potentially need to remove only some of its elements
              { label: this.subMenuItemLabel, visible: this.booleanPipe.transform(this.labelVisible) },
              { label: this.subMenuItemLabel, visible: this.booleanPipe.transform(this.labelVisible) },
              { label: undefined, visible: this.booleanPipe.transform(this.labelVisible) },
              { label: this.subMenuItemLabel, visible: this.booleanPipe.transform(this.labelVisible) },
              { label: this.subMenuItemLabel, visible: this.booleanPipe.transform(this.labelVisible) },
              { label: undefined, visible: this.booleanPipe.transform(this.labelVisible) }
            ]
          },
        ],
        [
          {
            label: subMenuLabel, visible: this.booleanPipe.transform(this.labelVisible), separator: true,
            items: [
              { label: subMenuItemLabel, visible: this.booleanPipe.transform(this.labelVisible) },
              { label: subMenuItemLabel, visible: this.booleanPipe.transform(this.labelVisible) },
              { label: subMenuItemLabel, visible: this.booleanPipe.transform(this.labelVisible) }
            ]
          }
        ]
      ]
    },
    ...
  </code></pre>
  
  <p>I was able to remove elements from the main object where label is undefined with this:</p>
  
  <pre><code>        this.items = this.items.filter(obj =&gt; obj.label !== undefined);
  </code></pre>
  
  <p>But I am not able to figure out how to nest another filter, or map, or find... not really sure how.. to be able to access the nested items and check their labels for undefined and remove them!</p>
  
  <p><strong>EDIT1:</strong>
  The this.items object is a MenuItem[] array. MenuItem is a PrimeNG class. It has the following definition:</p>
  
  <pre><code>export interface MenuItem {
      label?: string;
      icon?: string;
      command?: (event?: any) =&gt; void;
      url?: string;
      routerLink?: any;
      queryParams?: { [k: string]: any };
      items?: MenuItem[]|MenuItem[][];
      expanded?: boolean;
      disabled?: boolean;
      visible?: boolean;
      target?: string;
      routerLinkActiveOptions?: any;
      separator?: boolean;
      badge?: string;
      badgeStyleClass?: string;
      style?:any;
      styleClass?:string;
      title?: string;
      id?: string;
      automationId?: any;
  }
  </code></pre>
  
  <p>In order to construct the MegaMenu component you have to define your structure in the typescript file and I'm unable to deviate from this as it's not my call. I am also unable to chose another menu component from PrimeNG's library. I hope my further explanation helps, sorry if I was not clear enough at first. I wanted to focus in on the issue specifically without over complicating the question.</p>
  
  <pre><code>this.items = [ //main MenuItem[] contains the entire menu
    {
      label: label1, visible: this.booleanPipe.transform(this.labelVisible),
      items: [ //nested MenuItem[][] contains the headings and each individual menu list for headings
        [
          {
            label: this.label2, visible: this.booleanPipe.transform(this.labelVisible), separator: true,
            items: [ //another MenuItem[] (contains dropdowns, subheadings etc)
              { label: this.label3, visible: this.booleanPipe.transform(this.labelVisible) },
  </code></pre>
  
  <p>The main reason for wanting to be able to remove the inner most nested items object is because angular still renders a blank spot in the menu even if you make it visible: false. This makes the menu look really, really ugly and fragmented. </p>
  
  <p>Thanks for all the suggestions so far and helping close some of the gaps in my knowledge, I will try to implement all suggested ideas tomorrow and report back. I hope my edits offer more clarity.</p>
  
  <p><strong>EDIT:</strong> 
  I'm signing off for the day, latest attempt I had this but it didn't work:</p>
  
  <pre><code>   for (let item of this.items) {
        for (let subItem of item.items) {
          subItem = (subItem as (MenuItem)[]).filter(obj =&gt; obj.label !== undefined);
        }
      }
  </code></pre>