Puedo filtrar debajo de la matriz

this.items = [
  'Amsterdam',
  'Bogota',
  'India'
];

Estoy usando este código en mi archivo list.ts:

if (val && val.trim() != '') {
  this.items = this.items.filter((item) => {
    return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
  })
}

Requisito: estoy obteniendo datos de JSON que devuelven una matriz con varios resultados, la imagen de html y la consola que se muestra a continuación. El problema es cómo filtro esto:

Estoy obteniendo datos de JSON usando este código a continuación:

this._listProduct.listProduct().subscribe(data => {
  this.list = data;
 console.log(data);

Quiero filtrar this.list:

Imagen: list.html y de console.log:

enter image description here

Código list.html para su referencia:

<ion-content padding>
    <ion-grid>


        <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>


       <ion-row>
          <ion-col>Id</ion-col>
          <ion-col>Product/Service</ion-col> 
          <ion-col>Name</ion-col>
          <ion-col>Unit</ion-col>
          <ion-col>Category</ion-col>
          <ion-col>HSN</ion-col>
          <ion-col>Posting head</ion-col>
          <ion-col>Rate</ion-col>
          <ion-col>Type</ion-col>
          <ion-col>SACCode</ion-col>
          <ion-col>Tax Collected</ion-col>
          <ion-col></ion-col>
       </ion-row> 

       <ion-row *ngFor = "let list of list"> 
          <ion-col>{{list.ID}}</ion-col>
          <ion-col>{{list.PRODUCTSERVICE}}</ion-col> 
          <ion-col>{{list.NAME}}</ion-col>
          <ion-col>{{list.UNIT}}</ion-col>
          <ion-col>{{list.CATEGORY}}</ion-col>
          <ion-col>{{list.HSN}}</ion-col>
          <ion-col>{{list.POSTINGHEAD}}</ion-col>
          <ion-col>{{list.RATE}}</ion-col>
          <ion-col>{{list.TYPE}}</ion-col>
          <ion-col>{{list.SACCODE}}</ion-col>
          <ion-col>{{list.TAX_CONNECTED}}</ion-col>
          <ion-col>
             <ion-icon ios="ios-create" md="md-create" (click)="editProduct(list)"></ion-icon>
             <ion-icon ios="ios-close-circle" md="md-close-circle" (click)="deleteProduct(list)"></ion-icon></ion-col> 
       </ion-row>   
    </ion-grid>  
</ion-content>

Actualización 1

Intenté usar el siguiente código pero me está dando un error:

list.toLowerCase no es una función

Código intentado:

if (val && val.trim() != '') {
  this.list = this.list.filter((list) => {
    return (list.toLowerCase().indexOf(val.toLowerCase()) > -1);
  })
}
0
user2828442 12 nov. 2017 a las 12:26

2 respuestas

La mejor respuesta

Agregue más condiciones en el filtro para filtrar el objeto. PFB el código donde se comparará el término de búsqueda con el nombre, el servicio del producto y la categoría.

this.items = this.items.filter((item) => {
    return ((item.name.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1) || 
(item.productservice .toLowerCase().indexOf(searchTerm.toLowerCase()) > -1) || 
(item.category .toLowerCase().indexOf(searchTerm.toLowerCase()) > -1));
  })
2
Prithivi Raj 12 nov. 2017 a las 10:23

Inicialmente duplicar la respuesta ...

this.copylist = this.list;

search(val) {
this.list = this.copylist;
if (val && val.trim() != '') {
  this.list = this.list.filter((item) => {
    return (item.name.toLowerCase().indexOf(val.toLowerCase()) > -1);
  })
}

}

0
slfan 14 mar. 2019 a las 08:11