Hold Map response from http response in Angular/typescript

Question

I have a service that returns a map of key values pairs Map<String, List<String>>

{
    "code1": [
        "F10",
        "F11"
    ],
    "code2": [
        "F12",
        "F13"
    ]
}

I am trying to hold this response in angular app

getCodes(): Observable<Map<string, string[]>> {
   return this.http.get<Map<string, string[]>>(url, {headers})
        .pipe(map((response: Map<string, string[]>) => {
          return response;
        }));
    }

and after I subcribe to the observable and try to access the map with key, I am getting an error this.codes.get is not a function

Component:

codes = new Map<string, string[]>();

this.service.getCodes().subscribe(response => {
 this.codes = response;
 console.log('for code1', this.codes.get('code1'));
}

when I log the response, it is not looking like a map. Pls help

yurzui · Accepted Answer · 2020-07-29 18:30:26Z

4

You are getting not a map, but a json.

You can type it correctly with:

return this.http.get<Record<string, string[]>>(url, {headers});
// note no "map(..)" is done. It is doing nothing so I omitted it

In order to convert it to Map you can use:

this.codes = new Map(Object.entries(response));

edited Jul 29, 2020 at 18:30

yurzui

215k32 gold badges450 silver badges413 bronze badges

answered Jul 29, 2020 at 18:03

Andrei

12.8k1 gold badge16 silver badges25 bronze badges

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

1 Comment

user09 Over a year ago

Thank you this helped

Collectives™ on Stack Overflow

Hold Map response from http response in Angular/typescript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related