How to only show specific values using Angular 8 keyvalue pipe

Question

I am wondering how I can only show specific values with the key-value pipe. So far I have tried to do item.value.form_name but that comes up as null when the property is set from my API. When I do item.value then it shows me all of the items in the object. I only want the form name and the organization to show.

Code:

 <div class="form-details"> <div *ngFor="let item of form?.results | keyvalue"> <span class="col-6">{{item.value.id}}</span> <span class="col-6">{{item.value.org}}</span> </div> </div>

How the data is being received

Answer 1

Try like this:

Working Demo

<div *ngFor="let item of form?.results | keyvalue">
    <ng-container *ngIf="item.key == 'id' || item.key == 'org'">
        <span class="col-6">{{item.value}}</span>
    </ng-container>
</div>

Answer 2

you can try this

 <div class="form-details">
<div *ngFor="let item of form?.results | keyvalue">
  <span class="col-6">{{item.value.id == 'null' ? '' : item.value.id}}</span>
  <span class="col-6">{{item.value.org == 'null'? '' : item.value.org}}</span> 
</div>
</div>

Answer 3

<div class="form-details">
    <div *ngFor="let item of results | keyvalue">
        <div *ngIf="item.key == 'id' || item.key == 'org'">
            <span class="col-6">{{item.value}}</span>
        </div>
    </div>
</div>

Answer 4

Try this, you can minimize the code with some thing like this.

<div *ngFor="let item of form?.results | keyvalue">
    <ng-container *ngIf="item.key == ('id' || 'org')">
        <span class="col-6">{{item.value}}</span>
    </ng-container>
</div>