How to add conditions on static JSON object using Type Script

Question

I am working an application in which I created a static JSON object array which contains parent child data. I am showing that data into dropdown list what I want to achieve here is I have different records whose status will be different like completed, cancelled or others. I just to show or hide options from dropdown list using these statuses. Here is my JSON code.

export const projectCardVerticalDropdown = [
  {
    nameSub: 'Information',
    children: [
      {
        icon: 'i-expand',
        name: 'See Expanded Project',
        code: 1,
      },
    ],
  },

  {
    nameSub: 'Schedule',
    children: [
      {
        icon: 'i-plus',
        name: 'add a new task',
        code: 2,
      },
      {
        icon: 'i-calendar-week',
        name: 'see schedule',
        code: 3,
      },
    ],
  },
  {
    nameSub: 'Project Templates',
    children: [
      {
        icon: 'i-copy-1',
        name: 'Clone Project',
        code: 4,
      },
      {
        icon: 'i-project_stage_initiation',
        name: 'Make Template From Project',
        code: 5,
      },
      {
        icon: 'i-recieved_files2',
        name: 'Apply Template to this Project',
        code: 6,
      },
    ],
  },
  {
    nameSub: 'Data',
    children: [
      {
        icon: 'i-file-invoice-1',
        name: 'see Proposal',
        code: 7,
      },
      {
        icon: 'i-images',
        name: 'See Project Photos',
        code: 8,
      },
      {
        icon: 'i-mail_attachment',
        name: 'See Project Files',
        code: 9,
      },
    ],
  },
  {
    nameSub: 'Edit',
    children: [
      {
        icon: 'i-check_mark',
        name: 'mark project complete',
        code: 10,
      },
      {
        icon: 'i-edit',
        name: 'Edit Project Details',
        code: 11,
      },
    ],
  },
];

Here is my Html and ts Code

 verticalDropDownListData = projectCardVerticalDropdown;

<div class="f-column" *ngFor="let item of verticalDropDownListData">
                                            <span class="hr">
                                              <small class="">{{item.nameSub}}</small>
                                            </span>
                                            <button data-testid="project-card-expand" class="no-border"
                                              (click)="selectedProjectInfo(project)" *ngFor="let items of item.children"
                                              (click)="selectedDropdownListData(items.code,cloneModal, project)">
                                              <i class="{{items.icon}}"></i>
                                              <span>{{items.name}}</span>
                                            </button>
                                          </div>

I need to add check to show or hide options in JSON object array.

Where are these statuses `completed, cancelled or others`? – AT82 Nov 30 '21 at 10:55 — AT82, Nov 30 '21 at 10:55

score 1 · Answer 1 · answered Nov 30 '21 at 11:02

You need to first add a flag/parameter into the static JSON that denotes the status. It might look something like:

        export const projectCardVerticalDropdown = [
      {
        nameSub: 'Information',
        status: 'completed' //STATUS FOR PARENT
        children: [
          {
            icon: 'i-expand',
            name: 'See Expanded Project',
            code: 1,
            status: 'cancelled' //STATUS FOR CHILD
          },
          {
            icon: 'i-expand',
            name: 'See Expanded Project',
            code: 1,
            status: 'other'
          },
        ],
      }
]

Now assuming that you are trying to hide the parent or child with status 'cancelled' the code will look something like this:

<ng-container *ngFor="let item of verticalDropDownListData">

    <div class="f-column" *ngIf="item.status != 'cancelled'"><!-- Hiding element with cancelled status on parent level -->
        <span class="hr">
            <small class="">{{item.nameSub}}</small>
        </span>
        <ng-container *ngFor="let items of item.children">
            <button data-testid="project-card-expand" class="no-border" (click)="selectedProjectInfo(project)"
                (click)="selectedDropdownListData(items.code,cloneModal, project)" 
                *ngIf="items.status != 'cancelled'"><!-- Hiding element with cancelled status on parent level -->
                <i class="{{items.icon}}"></i>
                <span>{{items.name}}</span>
            </button>
        </ng-container>
    </div>
</ng-container>

score 0 · Answer 2 · answered Nov 30 '21 at 10:47

you can use "ng-container" for the loop to render the children and add ngIf for checking for status.

<div class="f-column" *ngFor="let item of verticalDropDownListData">
  <span class="hr"> 
    <small class="">{{item.nameSub}}</small> 
  </span>
  <ng-container *ngFor="let items of item.children" >
    <button *ngIf="[Place your condition Here]" data-testid="project-card-expand" class="no-border (click)="selectedProjectInfo(project)" 
(click)="selectedDropdownListData(items.code,cloneModal, project)">
      <i class="{{items.icon}}"></i>
      <span>{{items.name}}</span>
    </button>
</div>

score 0 · Answer 3 · answered Nov 30 '21 at 12:08

Here is the code this may help you out. I have implemented this using multiple statuses. Here is my code

export const projectCardVerticalDropdown = [ 
{
    nameSub: 'Information',
    status : [
      ProjectV2StatusTypes.NewLead,
      ProjectV2StatusTypes.ProjectTemplate, 
      ProjectV2StatusTypes.ProjectTerminated,
      ProjectV2StatusTypes.ProjectCompleted
    ],
    children: [
      {
        icon: 'i-expand',
        name: 'See Expanded Project',
        code: 1,
        status : [
          ProjectV2StatusTypes.NewLead,
          ProjectV2StatusTypes.ProjectTemplate, 
          ProjectV2StatusTypes.ProjectTerminated,
          ProjectV2StatusTypes.ProjectCompleted
        ]
      },
    ],
  }
]

You can keep it for both parent and child records. If you want to show See Expand Project for multiple statuses then you can do it like this. Defining Enum would be more appropriate to use it anywhere you want and can be changed easily if you need to change any of the statuses.

On your TS side please add this code.

checkStatus(projectStatus: any , statusList:any[]) : boolean{
    return statusList.indexOf(projectStatus) > -1;
   }

It will return true or false on the basis of condition.

Here is the Html code you can do like this.

<div class="f-column" *ngFor="let item of verticalDropDownListData">
                                            <span class="hr" >
                                              <small class="" *ngIf="checkStatus(project?.ProjectStatusType,item.status) === true">{{item.nameSub}}</small>
                                            </span>
                                            <div *ngFor="let items of item.children">
                                              <button data-testid="project-card-expand" class="no-border" *ngIf="checkStatus(project?.ProjectStatusType,items.status) === true"
                                              (click)="selectedProjectInfo(project)" 
                                              (click)="selectedDropdownListData(items.code,cloneModal, project)">
                                             
                                                <i class="{{items.icon}}"></i>
                                                <span>{{items.name}}</span>
                                           
                                            </button>
                                            </div>
                              
                                          </div>

As you can see I have added a check for both parent and child records which allows you to show or hide any of the parents or children you want to by just adding single status on the specified location.

How to add conditions on static JSON object using Type Script

3 Answers3