Unable to filter an array with multiple objects in Ionic 2

Question

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:

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

what do you want to filter? you got the array of objects in response and iterating the same in HTML. what else you want? — Prithivi Raj
– Prithivi Raj, Commented Nov 12, 2017 at 9:36
i want to filter this entire array when i type in the search box, when i am typing only matching rows should be seen,i want to search from all objects — user2828442
– user2828442, Commented Nov 12, 2017 at 9:37
First, you're using the same variable list to refer to the list of objects, and to an element inside the list of objects. Pick a better name, like product, if that's what the list contains. You're calling toLowerCase() on the elements of the list. But the list doesn't contain strings, it contains objects. So that makes no sense. You need to decide on which property(ies) of the product you want to filter: name? category? — JB Nizet
– JB Nizet, Commented Nov 12, 2017 at 9:53
i would like to filter on name,productservice and category — user2828442
– user2828442, Commented Nov 12, 2017 at 9:57

Prithivi Raj · Accepted Answer · 2017-11-12 10:23:12Z

2

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

answered Nov 12, 2017 at 10:23

Prithivi Raj

2,7361 gold badge22 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user2828442 Over a year ago

as per ypur guidance i coded like this - ` if (val && val.trim() != '') { this.list = this.list.filter((item) => { return ((item.name.toLowerCase().indexOf(val.toLowerCase()) > -1) || (item.productservice .toLowerCase().indexOf(val.toLowerCase()) > -1) || (item.category .toLowerCase().indexOf(val.toLowerCase()) > -1)); }) }` but when i type anything on search box i am geting this - Cannot read property 'toLowerCase' of undefined

Prithivi Raj Over a year ago

check whether the items have the collection of objects with name, productservice and category properties

Prithivi Raj Over a year ago

you can refer this link for working sample stackblitz.com/edit/ionic-array-example

user2828442 Over a year ago

it has name,productservice and category..i have seen your example, i am able to search from 1 array object, problem is how to search from multiple..can we chat ?

Prithivi Raj Over a year ago

If you have multiple array of objects, merge into single array and add condition in filter method to filter the objects on display. yeah you can reach me at [email protected]

slfan · Accepted Answer · 2019-03-14 08:11:24Z

0

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

}

edited Mar 14, 2019 at 8:11

slfan

9,129115 gold badges69 silver badges81 bronze badges

answered Mar 14, 2019 at 7:47

mastro

511 silver badge2 bronze badges

Collectives™ on Stack Overflow

Unable to filter an array with multiple objects in Ionic 2

Update 1

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Update 1

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related