Map a map response to a map in typescript/angular

Question

Working on angular4 for a while, today I came to a scenario where my service is returning me a map instead of a JSON response. How can I map that service with my map. Error I am getting in visual studio Type Info cannot be assigned to type Map<string, Info>. My code is as below: Please advice me did I make a correct model class? how to map service map response to my map.

response from service

{
"1":{
     "id":"1",
     "name":"Anna"
    },
"2":{
     "id":"2",
     "name":"Martin"
    }
}

ts file

    myMap: Map<string, Info>;
     this.groupService.fetchInfo().subscribe(data => {
     this.myMap= data; // Error in visual studio: Type Info cannot be 
                       // assigned to type Map<string, Info>
    });

Info model

// Not sure if this model structure is correct
export interface Info{
  id: string;
  name: string;
}

service

fetchInfo(): Observable<Info>{
 const url = "/info/getInfo";
 return this.httpClient.get<Info>(url);
}

Cant you just change your service's return type from <Info> to <Map> ? — mrkernelpanic
– mrkernelpanic, Commented Aug 9, 2018 at 12:52

Frank Modica · Accepted Answer · 2018-08-09 13:27:01Z

2

The response is still JSON, it's just that the JSON is an object that maps a string to an Info type. So it can defined as { [key: string]: Info }. So your service either needs to defined as:

fetchInfo(): Observable<{ [key: string]: Info }>

Or if you want a real JavaScript map (not an object), the service needs to explicitly convert the object into a map. The whole thing should look something like this (I didn't have a chance to check the syntax):

fetchInfo(): Observable<Map<string, Info>> {
    return this.httpClient.get<{ [key: string]: Info }>(url).map(response => { 
        const map = new Map();
        Object.keys(response).forEach(key => {
            map.set(key, response[key]);
        });
        return map;
    });
}

edited Aug 9, 2018 at 13:27

answered Aug 9, 2018 at 12:57

Frank Modica

10.5k4 gold badges27 silver badges42 bronze badges

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

Collectives™ on Stack Overflow

Map a map response to a map in typescript/angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related