web-dev-qa-db-fra.com

Barre de recherche avec filtre et à partir de données JSON avec Ionic 2

Je suis très nouveau sur TypeScript et Ionic 2 et j'essaie de filtrer une réponse JSON avec la barre de recherche Ionic 2.

Ceci est mon code: 

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {Http} from '@angular/http';
import 'rxjs/add/operator/map';



@Component({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {

  posts: any;
  private searchQuery: string = '';
  private items: string[];
  constructor(private http: Http) {

    this.initializeItems();

    this.http.get('https://domain.co/open.jsonp').map(res => res.json()).subscribe(data => {
        this.posts = data;
        console.log(this.posts);

    });

  }

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

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

}

Et le balisage: 

<ion-header>
  <ion-searchbar (ionInput)="getItems($event)" [debounce]="500" placeholder="Suchen..."></ion-searchbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item *ngFor="let post of posts">
      <h1>{{post.storeName}}</h1>
    </ion-item>
  </ion-list>
</ion-content>

Je cette erreur quand je cherche:

item.toLowerCase n'est pas une fonction

Les données JSON ressemblent à ceci: 

[
{
storeName: "Avec Hauptbahnhof",
addressLink: "",
phone: "0326223902",
image: "",
description: "",
link: "",
openingHours: [
"05.30 - 22:00",
"05.30 - 22:00",
"05.30 - 22:00",
"05.30 - 22:00",
"05.30 - 22:00",
"06.30 - 22:00",
"7.00 - 22.00"
]
},
{
storeName: "Manor",
addressLink: "",
phone: "0326258699",
image: "",
customer: "",
description: "",
link: "",
openingHours: [
"09.00 - 18.30",
"09.00 - 18.30",
"09.00 - 18.30",
"09.00 - 21:00",
"09.00 - 18.30",
"08.00 - 17.00",
"Geschlossen"
]
}
]
angulartypescriptionic-frameworkionic2ionic3
5
olivier

Vous obtenez cette erreur car chaque item n'est pas une chaîne, mais un objet, donc au lieu de faire

item.toLowerCase().indexOf(val.toLowerCase()) > -1

Tu devrais faire

item.storeName.toLowerCase().indexOf(val.toLowerCase()) > -1

Veuillez également noter que, selon vous, vous utilisez le tableau posts

*ngFor="let post of posts"

Mais vous devriez utiliser le tableau items à la place, car c'est celui-ci qui va être filtré

  <ion-list>
    <ion-item *ngFor="let item of items">
      <h1>{{item.storeName}}</h1>
    </ion-item>
  </ion-list>

De plus, je ferais les choses un peu différemment, juste pour m'assurer que l'utilisateur est capable d'utiliser la page seulement lorsque les données sont disponibles (puisque vous utilisez une requête http pour l'obtenir). Pour ce faire, j'ajouterais une alerte de chargement et la supprimerais dès que la requête http est terminée. Depuis Ionic2-beta.11, vous pouvez le faire comme ceci:

import { Component } from '@angular/core';
import { NavController, LoadingController } from 'ionic-angular';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';


@Component({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {

  private posts: any; // <- I've added the private keyword 
  private searchQuery: string = '';
  private items: any; // <- items property is now of the same type as posts
  constructor(private http: Http, private loadingCtrl: LoadingController) {

    // this.initializeItems(); <- you don't need this anymore

    // Show the loading message
    let loadingPopup = this.loadingCtrl.create({
      content: 'Loading posts...'
    });

    this.http.get('https://domain.co/open.jsonp').map(res => res.json()).subscribe(data => {
        this.posts = data;
        this.initializeItems();

        // Hide the loading message
        loadingPopup.dismiss();
    });
  }

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

  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.storeName.toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }
  }

}
22
sebaferreras

Le même problème que j'ai rencontré lorsque j'ai travaillé dans angular 2 avec ionic.

Dans notre projet, nous avons une méthode pour obtenir toute la liste de produits et afficher les articles en utilisant * ngFor.

Chaque fois que nous effectuons une recherche en utilisant la barre de recherche ionique, le texte de recherche saisi sera obtenu en utilisant "event.target.value" Nous devons vérifier si le texte de recherche correspond aux éléments.

Le code est,

   getAllProdcuts(isFrom, searchText){
      this.toDoService.getAllProdcuts().then((res) => {
        this.items = res;
            if(isFrom == 'search') {
                this.items = this.items.filter((item) => {
                    return (item.toLowerCase().indexOf(searchText.toLowerCase()) > -1);
                })
            }
        }, (err) => {

        });
    }

  getItems(ev: any) {

    // 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.getAllProdcuts("search", val);
    }
  }

Ici, nous pouvons obtenir des éléments filtrés à partir de la méthode.

Merci.!

0
Ponmurugan Mohanraj