Searchbar with JSON data ionic 3

Question

I want to use a searchbar with a JSON file.

So I tried to use methods on this subject : Searchbar with filter from JSON data with Ionic 3

But that doesn't work

This is my ts :

export class RechercheAidePage {

  constructor(public navCtrl: NavController, public navParams: NavParams, public http: HttpClient) {
    //this.initializeItems();
    this.loadData();
  }

    searchTerm: string ;
    filterItems:any;
    items: any;



   loadData(){
    let data:Observable<any>;
    data = this.http.get("assets/donneesJSON.json");
    data.subscribe(result => {
          this.items = result;
          this.filterItems= this.items;
   })

   }

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

  getItems(ev:any){
    this.initializeItems();
    const val = ev.target.value;
  }

  filterItems(ev:any){
    this.loadData();
    const val = ev.target.value;
    this.filterItems = this.items.filter(item =>  
      {
        item.titre.toLowerCase().indexOf(this.searchTerm.toLowerCase()) > -1;
      })
    }

This is an example of my JSON :

[{
        "id" : 6,
        "titre": "Electrocution",
        "categorie": "retourexp",
        "contenu": "Mon chien à mordu un cable derrière ma TV. Il est mort électrocuté. Je vous conseil donc de ne pas regarder la TV",
        "reponse1": "Bonne idée Michel !",
        "reponse2": "Merci pour ce retour très touchant."
    },
    {
        "id" : 7,
        "titre": "Le moribond",
        "categorie": "retourexp",
        "contenu": "Adieu l'Émile, je t'aimais bien\nAdieu l'Émile, je t'aimais bien, tu sais\nOn a chanté les mêmes vins\nOn a chanté les mêmes filles\nOn a chanté les mêmes chagrins\nAdieu l'Émile, je vais mourir\nC'est dur de mourir au printemps, tu sais\nMais je pars aux fleurs la paix dans l'âme\nCar vu que tu es bon comme du pain blanc\nJe sais que tu prendras soin de ma femme\nJe veux qu'on rie, je veux qu'on danse\nJe veux qu'on s'amuse comme des fous\nJe veux qu'on rie, je veux qu'on danse\nQuand c'est qu'on me mettra dans le trou\n",
        "reponse1": "Adieu Grand Jacques"
    }
]

This is my html :

<ion-grid>

<ion-row>
  <ion-col col-12><h2>Question</h2></ion-col>
  <ion-searchbar [(ngModel)]="searchTerm" (ionInput)="filterItems()"></ion-searchbar>
</ion-row>

<br>

<ion-row>
    <ion-col col-12><h2>Sujets similaires</h2></ion-col>
    <ion-col col-12>
        <ion-list>
          <!--*ngIf="item.id>=4"-->
            <ng-container *ngFor="let item of filterItems" > 
                <button ion-item (click)="itemSelected(item)">
                    {{item.titre}}
                </button>
            </ng-container>     
        </ion-list>
    </ion-col>
</ion-row>
</ion-grid>

This is the error displayed in the console (and I don't understand it) : Error: Cannot find a differ supporting object 'function (ev) {.......}' of type 'function'. NgFor only supports binding to Iterables such as Arrays.

Please can you help me ? :)

ionicframework.com/docs/components/#searchbar

Najam Us Saqib
– Najam Us Saqib

2018-10-11 12:52:45 +00:00
Commented Oct 11, 2018 at 12:52 — Najam Us Saqib
– Najam Us Saqib, Commented Oct 11, 2018 at 12:52
show your json data

Exterminator
– Exterminator

2018-10-11 13:07:16 +00:00
Commented Oct 11, 2018 at 13:07 — Exterminator
– Exterminator, Commented Oct 11, 2018 at 13:07
I added my JSON file

Bastien Roussel
– Bastien Roussel

2018-10-12 07:51:44 +00:00
Commented Oct 12, 2018 at 7:51 — Bastien Roussel
– Bastien Roussel, Commented Oct 12, 2018 at 7:51

Ivo Brands · Accepted Answer · 2018-10-11 13:06:00Z

0

You are trying to run the ngFor on the function filterItems.

Try to use different names for your function and variables. filterItems is used as variable and function

loadData(){
 let data:Observable<any>;
 data = this.http.get("assets/donneesJSON.json");
 data.subscribe(result => {
       this.items = result;
       this.filterItems= this.items; <---- VARIABLE
 })

Function:

 filterItems(ev:any){ 
   this.loadData();
   const val = ev.target.value;
   this.filterItems = this.items.filter(item =>  
    {
       item.titre.toLowerCase().indexOf(this.searchTerm.toLowerCase()) > -1;
    })
 }

answered Oct 11, 2018 at 13:06

Ivo Brands

337 bronze badges

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

4 Comments

Bastien Roussel Over a year ago

Thank you it repaired my error. But now, my searchbar doesn't work anymore... Do you have an idea ?

Ivo Brands Over a year ago

U changed the variable name or the function name? If u changed the variable: Did u also change de variable in the ngFor? If u changed the function, did u change the (ionInput) = "FUNCTIONAME"

Bastien Roussel Over a year ago

That's a good point... but I've correctly change the variable in the HTML and in the TS

Ivo Brands Over a year ago

update your code please to the most recent version, so i can check if the variables en function names are used properly.

Exterminator · Accepted Answer · 2018-10-11 13:09:45Z

0

define like this:

`filterItems:any=[];`

and replace this.filterItems with this.filterItems[]

answered Oct 11, 2018 at 13:09

Exterminator

1,2467 silver badges14 bronze badges

Collectives™ on Stack Overflow

Searchbar with JSON data ionic 3

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related