Serializing rxjs Observable to custom business objects
<p>How do i serialize an rxjs observable returned by an http call to my business object? sample is mentioned below </p>

<p>myData.json:</p>

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

<p>Observable:</p>

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

<p>template: </p>

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

<p>everything works great with the above code, but i need to transform the JSON objects received asynchronously to instances of a different business objects and still bind asynchronously to the template. How do i achieve this. which rxjs operator let me achieve this?</p>

<p>My business class is: </p>

<pre><code>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";
    }
}
</code></pre>

<p>my actual template</p>

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