How do you avoid making multiple HTTP calls for the same information in Angular2 RxJS?
<p>I am building a simple web application which uses one endpoint ( let's say www.domain.com/card/cardname ) which returns an object as such:</p>

<pre><code>{
  name: 'john',
  type: 'male',
  text: 'funny guy'
}
</code></pre>

<p>I have an array of objects with predefined 'cardnames', for example: </p>

<pre><code>Cards = [
  { name: 'john' },
  { name: 'jack' },
  { name: 'jill' }
];
</code></pre>

<p>I have two views, one for all cards (list view), and one for each card (detail view).</p>

<p>Now, I make one call for every card in order to build my 'list view' (the names are not enough for the list view, I need one property that I can only get from the endpoint - say 'type').</p>

<p>When I want to click on one item of the list and get the full information, I would like to avoid making an extra HTTP call as I have the same data already 'available'.</p>

<p>1) What is the best practice in order to temporarily save my data? (localstorage?, sessionstorage?, save everything in an array?)</p>

<p>2) Practically, how do I push all http replies to an array, considering this is my Service code? (using observables)</p>

<pre><code>@Injectable()
export class CardService {
    private baseCorsUrl = 'https://crossorigin.me/';
    private privateUrl = 'http://localhost:3335/cardname/';
    private cardDataUrl = 'http://yugiohprices.com/api/card_data/';  // URL to web API
    constructor (private http: Http) {}

    public getDetailedInfo(card): Observable&lt;Card&gt; {
        return this.http.get(`${this.privateUrl}${card.name}`)
            .map(this.extractData);
    }

    private extractData(res: Response) {
        let body = res.json();
        return new Card(body.data.name, body.data.card_type, body.data.text);
    }
}
</code></pre>