Implement searching bar in Ionic 4

Ionic Framework
1

I am fetching data from a JSON file stored locally in my project. The JSON string is an array …

[
  [
    "o:94312904",
    "الموصل",
    "city-2",
    43.129,
    36.342,
    43,
    18
  ],
  [
    "o:2482644198",
    "الشرقاط",
    "city-3",
    43.234,
    35.518,
    42,
    15
  ],
  [
    "o:2484133456",
    "ناحية القيارة",
    "city-3",
    43.292,
    35.799,
    54,
    15
  ]
]

What i want to do , after searching on any city name . i want to pass the lat and long of city from keyPressed() to addThemFunction() even shows weather result . But when i do searching in box search he return all cities names array ! not elements that match the search criteria .

Code :

  search:any

  obs: any;

    keyPressed(event: any) { 

      console.log(event.target.value); 

      let val = event.target.value;

      if (val && val.trim() !== '') {
        return this.searchin(val);
      }

    }

    searchin(search){
      this.searching.get('./assets/ali.json').subscribe((data) => {

        this.search = data
        console.log(this.search)
      })

    }

      async addThemFunction(search){

        this.http.get("/json&geocode="+search[3]+","+search[4]+"&language=ar-OM&units=m"
        , {}, {})
        .then(data => {

          this.obs = JSON.parse(data.data).vt1observation


          }), err=>{
          }
        }

Html

  <ion-searchbar type="text" debounce="500" (ionInput)="keyPressed($event)"></ion-searchbar>
  <ion-list >
    <ion-item *ngFor="let item of search">
      {{ item[1]}}
    </ion-item>
  </ion-list>

any idea please ?

2

The searchin() does not filter based on the argument. It returns the full array. You need to set this.search based on a filter statement.

I believe the ionic doc on searchbar gives u how. And at least there are plenty examples on the web

3

l am beginner in ionic and i did many tries but l have same issues . could you please apply on my code ?

4

i did like this

keyPressed(event: any) { 

  console.log(event.target.value); 

  let val = event.target.value;
  this.search = this.search.filter((location) => {
    return location[1].toLowerCase().indexOf(this.searchin(val)) > -1;
  });
  this.searchin(val)

}

but l have error in console

ERROR TypeError: Cannot read property 'filter' of undefined

5

Initialise search as empty array, eg in the declaration (where it now says any) or in the constructor: this.search=

Beyond that there may be other obstacles…

6

I got an very easy way to implement on search functionality in Ionic and Angular. I hope this will help others, checkout gestyy.com/ertwPT