0

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:

{
  name: 'john',
  type: 'male',
  text: 'funny guy'
}

I have an array of objects with predefined 'cardnames', for example: 

Cards = [
  { name: 'john' },
  { name: 'jack' },
  { name: 'jill' }
];

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

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').

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'.

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

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

@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<Card> {
        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);
    }
}
George Katsanos
  • 13,524
  • 16
  • 62
  • 98

1 Answers1

0

1) Take a look at Service Workers. Here is an article that explains them and how to cache fetch calls: http://www.html5rocks.com/en/tutorials/service-worker/introduction/

2) Not quite understood what you want to do. You could subscribe to all HTTP calls and just store them or use a do to introduce a side effect.

Sebastian Sebald
  • 16,130
  • 5
  • 62
  • 66
  • What I did and it seems to work is I created an empty array (of objects), in which I push every new item I 'get' with subscribe.. I don't know if its a good practice though – George Katsanos Sep 05 '16 at 08:39
  • 1
    Depending on what you want to do with this array, [`scan`](http://www.learnrxjs.io/operators/transformation/scan.html) might also be a good fit. – Sebastian Sebald Sep 05 '16 at 12:28
  • It does. I want to reuse the array so the next time I need the same data I look for them in the array instead of making a second request. I was also suggested http://www.learnrxjs.io/operators/multicasting/share.html but i guess it has to do with multiple subscribes for one resource. – George Katsanos Sep 05 '16 at 14:33
  • actually I think my question is different from ".publishLast().refCount()" as I added it and I still see new HTTP requests going out.. I dont have multiple subscribers I only have one, which is querying the same data.. – George Katsanos Sep 05 '16 at 19:55