Rxjs Observable : subscribe to different values with one API call
<p>I have a CRUD API where the get on the entity returns both the list and the total number of items for the current filter configuration.</p>

<p>For example : <code>GET /posts</code></p>

<pre><code>{
    "items": [
        {
             "id": 1,
             "title": "post title 1"
        }
        ...
    ],
    "total": 9
}
</code></pre>

<p>How can I create an observable where the HTTP query is executed only one time but where I can subscribe to either the total value or the items list ?</p>

<p>I am in an Angular2 context with typescript.</p>

<p>I first tried this and it worked :</p>

<pre><code>this.http.get('/api/posts').map(response =&gt; response.json()).subscribe(data =&gt; {
  var items = data.items
  var total = data.total
});
</code></pre>

<p>But I don't like this as I cannot use my interface for the Post entity (or I must defined an interface like that <code>{items: Post, total: number}</code> this is not really graceful). What I would like to do is something like this :</p>

<pre><code>this.myPostService.totalObservable.subscribe(total =&gt; this.total = total)
this.myPostService.itemsObservable.subscribe(items =&gt; this.items = items)
</code></pre>

<p>But without triggering 2 queries.</p>

<p>I looked into this blog post : <a href="https://coryrylan.com/blog/angular-2-observable-data-services" rel="nofollow">https://coryrylan.com/blog/angular-2-observable-data-services</a> but I don't like the fact that you first subscribe and then call the list() method to load the list.</p>