CODEWITHSUNDEEP
angularionic-frameworkionic2
user2828442
user2828442

Reputation: 2515

Unable to filter an array with multiple objects in Ionic 2

I am able to filter below array

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

I am using this code in my list.ts file:

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

Requirement - I am fetching data from JSON which is returning array with multiple results, image of html and console shown below. Problem is how do I filter this:

I am fetching data from JSON using this code below:

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

I want to filter this.list:

Image: list.html and of console.log:

enter image description here

list.html code for your reference:

<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>

Update 1

I tried using below code but it is giving me error:

list.toLowerCase is not a function

Code tried:

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

Upvotes: 0

Views: 4339

Answers (2)

mastro
mastro

Reputation: 51

initially duplicate the response...

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);
  })
}

}

Upvotes: 0

Prithivi Raj
Prithivi Raj

Reputation: 2736

Add more condition in the filter to filter the object. PFB the code where the search term will be compared with name, product service and category.

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));
  })

Upvotes: 2

Related Questions