2016-12-29 3 views
0

ビジネスオブジェクトへのhttp呼び出しによって返されたrxjs observableをシリアル化するにはどうすればよいですか?サンプルは下に記載されてrxjsをシリアル化してカスタムビジネスオブジェクトに適用可能

mydata.jsonを:

[{ 
    "prop1" : "val1", 
    "prop2" : "val2", 
    "prop3" : "val3", 
    "prop4" : "val4", 
    }, { 
    "prop1" : "val11", 
    "prop2" : "val22", 
    "prop3" : "val33", 
    "prop4" : "val44", 
    },......] 

観察可能:

this.myData$ = this._http.get('/data/myData.json') 
        .map(response => <any[]>response.json()); 

テンプレート:

<ul> 
    <li class="text" *ngFor="let item of myData$ | async"> 
    {{item.prop1}} - {{item.prop2}} - {{item.prop3}} 
    </li> 
</ul> 

すべては上記のコードで素晴らしい作品が、私は変換する必要があります異なるビジネスオブジェクトのインスタンスに非同期的に受信されたJSONオブジェクトテンプレートとは非同期になります。どのように私はこれを達成するのですか?どのrxjsオペレータが私にこれをさせてくれますか?

私のビジネスクラスは次のとおりです。

export class Custom { 

    prop10: string; 
    prop20: string; 

    constructor(data) { 
     this.prop10 = this.evaluate(data.prop1); 
     this.prop20 = data.prop2; 

    } 
    private evaluate(val): string { 
     // do some custom business rules.... 
     return "something"; 
    } 
} 

私の実際のテンプレートあなたが内部の各配列-エントリは動作するはずマップ

<ul> 
    <li class="text" *ngFor="let item of myData$ | async"> 
    {{item.prop10}} - {{item.prop20}} 
    </li> 
</ul> 

答えて

1

シンプル追加.map、:

this.myData$ = this._http.get('/data/myData.json') 
        .map(response => <any[]>response.json()) 
        .map(items => items.map(item => new Custom(item)); 
+0

ザッツでした簡単:)ありがとう!私はそれがどのように動作するかを理解するために、rxjsオペレータを徹底的に学ぶべきだと思います。 – Sal

関連する問題