Common pattern for returning a mapped object from Http service

Question

One of my services has a method with this implementation:

public getCrawls(page: number): Observable<ICrawl[]>{
        return this._http.get(this._crawlsURL + page)
            .map((res: Response) => {
                return {
                    crawls: <ICrawl[]>res.json(),
                    headers: res.headers
                }
            })
            .catch(this.handleError);
    }

I am doing this as opposed to .map((res: Response) => <ICrawl[]>res.json())

So in the consumer component I can also access the headers to make my paginator work:

getCrawls(page: number): void {
        this._crawlsService.getCrawls(page)
            .subscribe(
                res => {
                    this.crawls = res.crawls;
                    this.totalItems = res.headers.get('X-Records');
                },
                error => this.errorMessage = <any>error);
    }

This works, but both res.crawls and res.headers are red in WebStorm. (unresolved variables) but the code compiles and works.

Which brings me to be believe this must be the wrong way of doing this. How can I achieve this without having unresolved variables.

You mean that you have some compilation errors by "unresolved variables"? — Thierry Templier, Apr 21 '16 at 15:24
If you try this: `res:{crawls:ICrawl[],headers:Headers} => { ...`? — Thierry Templier, Apr 21 '16 at 15:27

score 1 · Accepted Answer · answered Apr 21 '16 at 16:25

You've typed your Observable incorrectly. You have Observable<ICrawl[]>, you need:

interface ICrawlResponse {
    crawls: ICrawl[];
    headers: Headers;
}

public getCrawls(page: number): Observable<ICrawlResponse>{
        return this._http.get(this._crawlsURL + page)
            .map((res: Response) => {
                return {
                    crawls: <ICrawl[]>res.json(),
                    headers: res.headers
                }
            })
            .catch(this.handleError);
    }

I think this one is quite elegant. – makeitmorehuman Apr 21 '16 at 16:31 — makeitmorehuman, Apr 21 '16 at 16:31

score 0 · Answer 2 · answered Apr 21 '16 at 16:19

0

I think that you simply need to define the type of the object you expect in the callback:

getCrawls(page: number): void {
  this._crawlsService.getCrawls(page)
        .subscribe(
          res:{crawls:ICrawl[],headers:Headers} => { // <------
            (...)
          }
        );

answered Apr 21 '16 at 16:19

Thierry Templier

198,364
44
396
360

For this to work, you'd need to put wrap `(res: {/*type stuff*/})` in parentheses. – chrisbajorin Apr 21 '16 at 19:36

Common pattern for returning a mapped object from Http service

2 Answers2