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<SomeType[]> — paulsm4
– paulsm4, Commented Nov 10, 2018 at 1: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
– Gargoyle, Commented Nov 10, 2018 at 1:24
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
– Gargoyle, Commented Nov 10, 2018 at 2:28

Ingo Bürk · Accepted Answer · 2018-12-05 05:48:46Z

1

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

edited Dec 5, 2018 at 5:48

Ingo Bürk

20.2k7 gold badges72 silver badges103 bronze badges

answered Nov 10, 2018 at 1:21

solimanware

3,0524 gold badges22 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

solimanware Over a year ago

Yes, that's better and compatible with RxJS V6.0++, thanks

Trevor de Koekkoek · Accepted Answer · 2019-05-10 08:17:09Z

0

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}`)
}

answered May 10, 2019 at 8:17

Trevor de Koekkoek

2,5061 gold badge20 silver badges15 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related