2017-03-28 28 views
0

メンバー(列:名前、姓、セクション)を含むjsonファイルがあります。私はそのようにそれを読んで、* ngForでそれを使用することができます。Angular 2+ Observable and GroupBy

members: Observable<Member[]>; 

constructor(private _memberService: MemberService) { } 

ngOnInit() { 
    this.members = this._memberService.getMembers(); 
} 

は、今私は、チャートを使用します。しかし、私はどのように私が到達可能で、観察可能なグループに分けることができないのか分かりません。たとえば、セクションごとにメンバーをグループ化し、その値をチャートで使用したいとします。どんな助け?

編集:

マイサービス:

getMembers(){ 
    return this._http.get(URL_MEMBERS) 
    .map((response: Response) => response.json()); 
    } 

私のクラス:

export class Member { 
    section: number; 
    number: number; 
    firstName: string; 
    lastName: string; 
    status: string; 
    yearOfSep: number; 
    yearBook: number; 
    class: string; 
    lastPosition: string; 
    city: string; 
    info: string; 
} 

期待している何チャート:

public pieChartLabels: string[] = ['X', 'Y', 'Z']; 
    public pieChartData: number[] = [300, 500, 100]; 
    public pieChartType: string = 'pie'; 

答えて

1

私はあなたが混乱している理解することができますオブザーバブル、しかし、よウルの質問は多少間違った方向に向いています。

あなたのクラスのあなたのメンバープロパティは、Observable Member Array、right(Observable)ですか? Observablesを扱うことを期待していないライブラリを使用していても、配列(オブジェクトや入れ子配列など)はかなりわかります。

あなたのケースでは、最初のコールポートはメンバー配列のインスタンスを観測可能なものから取得することです。通常の、毎日のJavascript配列を取得したら、通常のjavascriptを使用して、その配列をチャートライブラリで使用する形式にマッサージします。

だから、あなたはあなたのチャートにデータを渡す必要があるポイント、あなたがメンバーのあなたの配列を取ると、あなたのチャートが消費するものは何でも形式に変換するために、そのロジックを実装する必要があり

let chartData; 
this.members.subscribe(memberArray => { 
    chartData = this.massageMemberArrayIntoChartDataFormat(memberData); 
}); 

で。 (私は方法の名前にばかげているが、うまくいけば私のポイントを得る)。

マッピングの仕方を理解できない場合は、メンバ配列と予想されるチャートデータのサンプルを提供できます。このマッピングについては、おそらく助けになるかもしれませんが、実際はそうではありませんObservablesそれ自体についての質問。

EDIT:あなたのチャートに欲しいものについて

見当もつかないが、期待されるデータは非常に単純です。

はあなたがすべての人のフルネームとセクションのチャートをしたいとしましょう:

あなたは既にメンバー[]すべてのデータを持っています。その後、あなたのチャートオブジェクトのプロパティとして、これらのpieChartLabelsとpieChartData変数を渡す

this.members.subscribe(memberArray => { 

// map the member objects in my array to a combined firstname and lastname string 
pieChartLabels = memberArray.map(m => m.firstName + ' ' + m.lastName); 

// map the member objects to their section numbers 
pieChartData = memberArray.map(m => m.section); 
}); 

:それは上ご購読関数内でこのような何かをするために非常に簡単ですので、あなたのラベルとグラフのデータも配列です。

+0

私は多くのコードで質問を編集しました。 – Crypto

+0

私はMembers []配列を持っていますが、Observableです。私は正常な配列に観測可能なデータを得ることができません。あなたが使ったメンバーArrayはどこにありますか?私は本当に悪いと感じました。:/ – Crypto

+0

私はコード例を更新しました。しかし、観察可能なものであれば、データを取得するために購読します。 – snorkpete