How do I pipe/map to return an array in Angular 7

Question

When I make a GET call via HttpClient I want to pass back an array of the actual typed objects, vs. just a generic 'object', and so I tried to do this:

getExistingArsByLab(labId: number): Observable<EhsAssessmentAr[]> {
    return this.http
        .get<EhsAssessmentAr[]>(`${this.baseUrl}/ar?labId=${labId}`)
        .pipe(
            map(x => {
                const ret = EhsAssessmentAr.fromJson(x);
                ret.ar = this.sanitizer.sanitize(SecurityContext.HTML, ret.ar.replace(/\n/g, '<br/>'));
                return ret;
            })
        )
}

That fromJson method is declared to return the proper class, and I thought since I was sending this through map that I'd get back an array. I'm REALLY new to RxJs so I'm sure I'm just doing something completely stupid there.

I'm getting theerror:

TS2322: Type 'Observable<EhsAssessmentAr>' is not assignable to type 'Observable<EhsAssessmentAr[]>`

Possible duplicate of [Observable<{}> not assignable to type Observable](https://stackoverflow.com/questions/37221062/observable-not-assignable-to-type-observablesometype) — paulsm4, Nov 10 '18 at 01:17
Doesn’t seem the same to me. I declared as an array return type and I feel like I am returning an array type. What you pointed at was returning array or object. — Gargoyle, Nov 10 '18 at 01:24
did you check https://stackoverflow.com/a/43233448/4591364 ? — solimanware, Nov 10 '18 at 01:37
Not at my computer but I think the issue is the map I used takes the array not a single object like the “normal” map — Gargoyle, Nov 10 '18 at 02:28

score 1 · Accepted Answer · edited Dec 05 '18 at 05:48

You can strong type your mapping response and Check you are returning array not single element:

getExistingArsByLab(labId: number): Observable<EhsAssessmentAr[]> {
    return this.http
        .get<EhsAssessmentAr[]>(`${this.baseUrl}/ar?labId=${labId}`)
        .pipe(
            map((x:EhsAssessmentAr[]) => {
                const ret = EhsAssessmentAr.fromJson(x);
                ret.ar = this.sanitizer.sanitize(SecurityContext.HTML, ret.ar.replace(/\n/g, '<br/>'));
                return ret;
            })
        )
}

Pro-tip 2: If you are changing return type for any reason you can use:

return <TypedArray[]> arrParsed["something"];

Pro-tip 3: Angular hates you feed it with html so you need to find some cool solution like when templating adding a replace of token to new line

Yes, that's better and compatible with RxJS V6.0++, thanks – solimanware Dec 06 '18 at 01:58 — solimanware, Dec 06 '18 at 01:58

score 0 · Answer 2 · answered May 10 '19 at 08:17

That is already the default behavior of Angular 7 HttpClient. So unless you need to do some extra processing of html or something like in your example, you just need the following:

getExistingArsByLab(labId: number): Observable<EhsAssessmentAr[]> {
  return this.http
    .get<EhsAssessmentAr[]>(`${this.baseUrl}/ar?labId=${labId}`)
}

How do I pipe/map to return an array in Angular 7

2 Answers2