イオン2フィルタローカルのJSONファイル

Question

私はJSONデータは以下のように見えるイオン2で構築された小さな情報アプリの使用AAローカルJSONファイル持っている：ファイルが置かれている

[ 
{name: 'John', type: 'admin', gender: 'male', rate: 0}, 
{name: 'Peter', type: 'sales', gender: 'male', rate: 1}, 
{name: 'Mary', type: 'admin', gender: 'female', rate: 1}, 
{name: 'Paula', type: 'tech', gender: 'female',, rate: 0} 
] 

をwww \ assets \ data \ people.jsonです。今私はこのようにこのデータにアクセスするサービスを作成することができます。 （サービス\ people.ts）

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 

@Injectable() 
export class PeopleService { 
    private http: any; 
    public data: any; 

    constructor(http: Http) { 
     this.http = http; 
    } 

    getPeople() { 
    this.http.get("assets/data/people.json") 
     .subscribe(res => { 
      this.data = res.json(); 
      console.log(this.data); 
     }, error => { 
      console.log(error); 
     }); 
    } 
} 

は、今私は、このデータを取得し、私が最後にpeople.ts

import { Component } from '@angular/core'; 
import { NavController, NavParams } from 'ionic-angular'; 
import { PeopleService } from '../../services/people'; 
import { PersonDetailPage } from '../person-detail/person-detail'; 

@Component({ 
    selector: 'page-people', 
    templateUrl: 'people.html' 
}) 
    export class PeoplePage { 
    people: any; 
    modData: any; 

    constructor(public navCtrl: NavController, public navParams: NavParams,public peopleService: PeopleService) { 

    this.selectedItem = navParams.get('item'); 

    this.people = peopleService; 
    this.people.getPeople(); 

    this.modData = this.people; 
    console.log(this.modData); 


    } 

    resetData() { 
     this.modData = this.people; 
    } 

filterData() { 
    this.modData = this.modData.filter((item) => { 
     return item.name == 'Mary'; 
    }); 

} 

type = this.navParams.get('type'); 


itemTapped(event, item) { 

    this.navCtrl.push(PersonDetailPage, { 
     item: item 
    }); 
} 

ionViewDidLoad() { 
    console.log('ionViewDidLoad PeoplePage'); 

} 

} 

に次したフィルタを適用し、私が持っているデータを表示したい場合テンプレート：

<ion-header> 

<ion-navbar> 
    <ion-buttons start> 
     <button ion-button icon-only (click)="resetData()"><ion-icon name="refresh"></ion-icon></button> 
    </ion-buttons> 
    <ion-buttons end> 
     <button ion-button icon-only (click)="filterData()"><ion-icon name="funnel"></ion-icon></button> 
    </ion-buttons> 
<ion-title>People</ion-title> 
    </ion-navbar> 

</ion-header> 


<ion-content padding> 
<ion-card> 
    <ion-card-header> 
     <h2>{{ type }}</h2> 
    </ion-card-header> 
    <ion-list *ngFor="let item of modData.data" (click)="itemTapped($event, item)"> 

     <ion-item> 
      {{item.name}} {{item.type}} 

      <ion-icon *ngIf="item.rate == 1" item-right name="star" class="custom-icon"></ion-icon><br />{{item.type}} 
     </ion-item> 
    </ion-list> 
    </ion-card> 
</ion-content> 

データをフィルタリングする関数があります（ngForはmodData.dataをループします）。 modDataにフィルタを適用するにはどうすればよいですか？

filterData() { 
    this.modData = this.modData.filter((item) => { 
     return item.name == 'Mary'; 
    }); 

filterData関数をクリックした場合、データにはMaryの名前しか表示されません。しかし、次のエラーのためfilterDataが失敗します

caused by: this.modData.filter is not a function 

私はそれがmodDataがオブジェクトだと思いますか？

PeopleServiceからデータを取得してフィルタリングするにはどうすればよいですか？もちろん、ヘッダー内の検索ボックスとして実際にはこのようにしたいと思います。

Answer 1

あなたはPeopleServiceのように

this.modData = this.people.data; 

にthis.modDataを設定する必要があり、ロードされたJSONデータを直接this.dataないサービスインスタンスに割り当てられています。

上記のようにthis.modDataの割り当てを変更して再度ロジックを試すことはできますか？

Answer 2

プロバイダーオブジェクトをmodDataに設定するのは、json値ではありません。コンポーネントのコンストラクタで

getPeople() { 
    return this.http.get("assets/data/people.json") 
     .map(res => { 
      this.data = res.json(); 
      //console.log(this.data); 
      return this.data; 
     }); 
    } 

： 私はあなたが原因call.Changeの非同期性そうのような方法にはを受信したデータを取得確保するためのコンポーネントでgetPeople()に加入することをお勧め：

peopleService.getPeople().subscribe(data=>{ 
    this.modData=data; 
},error=>{ 
    console.log(error); 
});