Loop Through Two JSON Arrays With a Boolean Condition [Angular 10]

Question

I have two JSON arrays from an external that I want to loop in Angular, but I am unsure how to do it.

The first array in the object looks like ViewAttributes.FunctionNames and the second array is ViewAttributes.FunctionActive.

Right now I am using a right menu but my objective is to show the correct FunctionNames value in the menu options when the boolean position for each value is true, not false . What do I need to change?

my code is below for example:

view.component.html

  <mat-menu #contextMenu="matMenu" #contextMenu2="matMenu">
    <ng-template matMenuContent let-action="action">
      <button mat-menu-item (click)="onContextMenuAction(action)">{{FunctionNames}}</button>
    </ng-template>
  </mat-menu>

view.component.ts

      // Right Click Context Menu for View Data Table

    onContextMenu(event: MouseEvent, action: ViewDataSource) {
      event.preventDefault();
      this.contextMenuPosition.x = event.clientX + 'px';
      this.contextMenuPosition.y = event.clientY + 'px';
      this.contextMenu.menuData = { action: action };
      this.contextMenu.menu.focusFirstItem('mouse');
      this.contextMenu.openMenu();
      console.log(this.FunctionNames);
    }

    onContextMenuAction(action: ViewDataSource ) {
      console.log(action);
      console.log(parseInt(action[0]));
      console.log(parseInt(action[3]));

      // this.launchService.launchAction(this.line.targetActionTag.value, this.line.targetActionType);
      // tslint:disable-next-line: radix
      this.launchService.launchAction(parseInt(action[0]), parseInt(action[3]));
    //   debugger;

    }

and my two JSON array object looks like:

ViewAttributes.FunctionNames = [Value1, Value2, Value3, ....]

ViewAttributes.FunctionActive = [true,false,true, ...]

Answer 1

If you want to show the FunctionNames based on the boolean value at the corresponding index in FunctionActive array.Then below code might help you

ViewAttributes.FunctionNames =ViewAttributes.FunctionNames.filter((each,index)=>{return ViewAttributes.FunctionActive [index]})

This will filter the array based on the boolean value in FunctionActive array.