Searchbar filter trough a database response data type Array<Object>

ionic ionic-v3
#1

Hi all ! I’m very new to typescript and ionic 2 and I’m trying to filter by description trough a database response.

[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
0: Object
code: "360"
description: "BARQUE"
ext_id: 136
id: 1
subscription_id: 3
proto: Object
1: Object
2: Object
3: Object
4: Object
5: Object
6: Object
7: Object
8: Object
9: Object
length: 10

How to update this function to my database response ?

getItems(ev: any) {
// Reset items back to all of the items
this.initializeItems();

// set val to the value of the searchbar
let val = ev.target.value;

// if the value is an empty string don't filter the items
if (val && val.trim() != '') {
  this.items = this.items.filter((item) => {
    return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
  })
}

}

#2

When you use the filter function, each element in the array is parsed. So, in your example:

  this.items = this.items.filter((item) => {
    return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
  })

item will be one of the objects from the array. If you want to filter based on each object’s description, you just need to use item.description, so something more like this:

  this.items = this.items.filter((item) => {
    return (item.description.toLowerCase().indexOf(val.toLowerCase()) > -1);
  })
#3

joshmorony, thank you very much for answer, but i have a little problem when run app …

Property ‘description’ does not exist on type ‘Object’.

My item is …

Object {id: 2, subs_id: 3, ext_id: 137, code: “400”, description: “some text”}

#4

Try this instead:

  this.items = this.items.filter((item: any) => {
    return (item.description.toLowerCase().indexOf(val.toLowerCase()) > -1);
  })
1 Like
#5

joshmorony, thank you very much. Something work, but i see a lot of result, i need check.

#6

joshmorony, good day! Could you suggest please, how to implement, that every time this.initializeItems(); do not show all items ? Filter return zero if i do not have such items, but i always see all items …

This is my reset. Request to database.

this.initializeItems() {

this.Service.get(this.id).then(data=>{
  for(let i = 0; i < data.res.rows.length; i++) {
    this.models.push(data.res.rows.item(i));
  }
})

}

getItems(ev: any) {

// Reset items back to all of the items
this.initializeItems();

// set val to the value of the searchbar
let val = ev.target.value;

// if the value is an empty string don't filter the items
if (val && val.trim() != '') {

    this.models = this.models.filter((item: any) => {

      return (item.description.toLowerCase().indexOf(val.toLowerCase()) > -1);

    })
}

}

#7

joshmorony, thanks for answer, I solve problem.

#8

Hey @anton_klochko ! How do you solve that problem?

#9

@anton_klochko or someone could you tell I have a simple searchbar

When I use

  initializeLawyers() {
    this.lawyers = [
      { id: 1 , name: 'Dr Murilo'},
      { id: 2 , name: 'August Elvis'},
      { id: 3 , name: 'Methwe Murdock'},
      { id: 4 , name: 'Demolidor'},
    ];
  }

The searchbar show object and work, but when I use

  initializeLawyers() {
    this.service.getLawyers()
        .subscribe(
          data => this.lawyers = data,
          e => console.log(e)
        );
  }

It’s show in html but the search does not work, someone idea ?

#10

If anyone has this same problem, the issue is quite simple to solve.
When you’re using a database response, those are async petitions to the systems.
If you do that in a sequence order, you will get problems.
So as an example, I have a class databaseServiceProvider with a function getAllProducto returning a Promise.
A promise has a then and a catch function to check the answer of my petition.
The filters must be donde inside the

.then(data => {// filter code here}) .catch( e => {// catch the error })

Because there is where the data is available and the info is full.
Hope it helps anybody.