Barre de recherche avec le filtre, et à partir des données JSON avec Ionique 2

Je suis très nouveau pour Tapuscrit et Ionique 2 et je suis en train de filtrer par le biais d'une réponse json avec Ionique 2 barre de recherche.

C'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>

J'ai cette erreur lorsque je recherche:

élément.toLowerCase n'est pas une fonction

Les données JSON ressemble à 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"
]
}
]
Ne https://domain.co/open.jsonp retourner une liste de chaînes de caractères?
elle renvoie un objet json
Pourriez-vous s'il vous plaît ajouter dans le po comment cet objet json ressemble?
bien sûr, j'ai édité la question @sebaferreras
Merci beaucoup. J'espère que la réponse pourrait vous aider 🙂

OriginalL'auteur olivier | 2016-08-20

  1. 23

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

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

    Que vous devriez faire

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

    Veuillez également noter que, dans votre point de vue vous êtes à l'aide de la postes tableau

    *ngFor="let post of posts"

    Mais vous devez utiliser le éléments tableau au lieu de cela, car c'est celui qui va être filtré

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

    En plus de cela, je ferais des choses un peu différentes, juste pour s'assurer que l'utilisateur est en mesure d'utiliser la page seulement lorsque les données sont disponibles (depuis que vous êtes à l'aide d'une requête http pour l'obtenir). Pour ce faire, je voudrais ajouter un chargement d'alerte et serait de le retirer dès que la requête http est fait. Comme de Ionic2-bêta.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);
})
}
}
}
    Merci beaucoup! 🙂 Comment et où avez-vous appris ionic2 et typescipt? Je me déplace maintenant à partir ionique de 1 à ionique 2.
    Je dirais que le meilleur endroit pour apprendre Ionic2 est Ionic2 docs. Vous allez économiser beaucoup de temps si vous lisez les composants que vous allez utiliser dans votre projet avant le obtenir vos mains sales 🙂

    OriginalL'auteur sebaferreras

  2. 0

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

    Dans notre projet, nous avons une méthode pour obtenir tous les produits de la liste et affiche les éléments à l'aide de *ngFor.

    Chaque fois que nous faisons de la recherche en utilisant ionique barre de recherche, la recherche d'entrée de texte sera obtenu à l'aide de "l'événement.cible.de la valeur". Nous devons vérifier si le texte de la recherche est détectée dans les articles.

    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 de la méthode.

    Merci.!

    OriginalL'auteur Ponmurugan Mohanraj