How to show only product active=0 when using select in Angular

Question

I want to show only data active=0. I get all data in JSON like below:

{
    "StatusCode": 0,
    "StatusMessage": "OK",
    "StatusDescription": [
        {   "h_id": "1",
            "active": 0,
            "date_created": "2018-08-02T15:28:52.000Z",
            "serial_number": "4324fdfd",
            "client_id": null
        },
        {   "h_id": "2",
            "active": 0,
            "date_created": "2018-08-02T15:28:52.000Z",
            "serial_number": "3435fdf",
            "client_id": null
        },
        {   "h_id": "3",
            "active": 0,
            "date_created": "2018-08-02T15:28:52.000Z",
            "serial_number": "fgdge43",
            "client_id": null 
        },
        {   "h_id": "4",
            "active": 1,
            "date_created": "2018-08-02T15:28:52.000Z",
            "serial_number": "edf43",
            "client_id": 1
        },
        {
            "h_id": "5",
            "active": 1,
            "date_created": "2018-08-02T15:28:52.000Z",
            "serial_number": "3456677777",
            "client_id": 2
        },
        ....
        {
           "h_id": "10",
            "active": 1,
            "date_created": "2018-08-02T15:28:52.000Z",
            "serial_number": "JDLk32",
            "client_id": 200
        }
      ]
     }

In html I write this code to show all data in drop down:

<div class="input-field col s12">
  <select formControlName="h_id" id="h_id" materialize="material_select" [materializeSelectOptions]="hbp" >
    <option value="" disabled selected>Select Hb</option>
    <option *ngFor="let hb of hbp" [value]="hb.h_id">{{hb.serial_number}}</option>
  </select>
</div>

All value show correct in drop down select, but I want to show in drop down only hb that have active:0

Please, can you ask me any idea how to show only data active = 0 ?

Answer 1

Create a getter in your component.

get zeroHbp() {
  return this.hbp && this.hbp.filter(hb => hb.active === 0) || [];
}

<option *ngFor="let hb of zeroHbp" [value]="hb.h_id">{{hb.serial_number}}</option>