Search filter in angular | Filtering Firebase Data

Question

I have following data structure on realtime Database firebase :

l want to advanced Firebase Data Filtering when user search on item id number itemId . but i have following error :

ERROR TypeError: Cannot read property 'toLowerCase' of undefined

My code :

  public selectedItems: Array<any> = [];
  items:any []; // for firebase using

  ngOnInit() {

this.af.list('orderhistory/'+this.getDates).valueChanges().subscribe((data:any)=>{

      data.forEach(element => {
        element.data.newproduct.forEach(res => {
          this.selectedItems.push(res);
          this.items = this.selectedItems;
        });
      });

    })

}


  initializeItems() {
    this.items = this.selectedItems;
  }

  getItems(ev: any) {

    this.initializeItems();

    let val = ev.target.value;
if (val && val.trim() != "") {
  this.items = this.items.filter(data => {

return Number.isInteger( data.item.itemId as number) })

}
}

Html code :

        <input type="text" (keydown)="getItems($event)" placeholder=" Enter item id  " class="form-control">

any idea please ?

score 0 · Answer 1 · answered May 18 '20 at 16:32

0

The data is asynchronous here and needs the data flow needs to restructured. The quickest workaround I could come up with is to assign the variable this.items from the getItems() functions. Try the following

public selectedItems: Array<any> = [];
items: any[] = [];             // <-- assign empty array here

ngOnInit() {
}

initializeItems() {
  const result = new Subject();

  this.af.list('orderhistory/'+this.getDates).valueChanges().subscribe((data:any)=>{
    data.forEach(element => {
      element.data.newproduct.forEach(res => {
        this.selectedItems.push(res);
      });
    });
    this.items = this.selectedItems;
    result.next(res);
  });

  return result.asObservable();
}

getItems(ev: any) {
  this.initializeItems().subscribe(
    response => {
      let val = ev.target.value;
      if (val && val.trim() != "") {
        this.items = this.items.filter(data => {
          return data.item.itemId.toLowerCase().indexOf(val.toLowerCase()) > -1;
        });
      }
    }
  );
}

You get the error because data.item.itemId isn't defined when the toLowerCase() function is called.

You could learn more about accessing asynchronous data here: https://stackoverflow.com/a/14220323/6513921

answered May 18 '20 at 16:32

ruth

29,535
4
30
57

Thank you for answering . i have error `ERROR TypeError: data.item.itemId.toLowerCase is not a function` – Ali Ghassan May 18 '20 at 17:28
When i replace `data.item.itemId.toLowerCase` withe `data.item.title.toLowerCase` , The error is disperse . but if i put `data.item.itemId.toLowerCase` i get ERROR `TypeError: data.item.itemId.toLowerCase is not a function` – Ali Ghassan May 18 '20 at 17:39
[`toLowerCase()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase) can only be called on variables of type `string`. Please check if `itemId` is of type string. – ruth May 18 '20 at 17:44
`itemId` is a number of the item . – Ali Ghassan May 18 '20 at 17:45
What do you expect achieve calling `toLowerCase()` on a number? – ruth May 18 '20 at 17:46
Yes, I did not realize that , So i changed to `Number.isInteger( data.item.itemId as number)` , but when i search on item number nothing to show – Ali Ghassan May 18 '20 at 17:48
I don't quite understand what you're trying to achieve here. – ruth May 18 '20 at 18:09
check the image pls : https://i.ibb.co/m5DWd0Q/Capture.png , i have data display form firebase database . For each item has id . want to search on any item via id of item . – Ali Ghassan May 18 '20 at 18:50

Search filter in angular | Filtering Firebase Data

1 Answers1