Angular Http JSON response Mapping

Question

I am trying to map a Http JSON Response to a Custom Interface in Angular / typescript. I have tried it in several ways but have not made it yet. The JSON object is not correctly mapped to the interface. The map attribute stays "undefined". If I print the data directly, the JSON data is output correctly - the problem is that I don't know how to access it. Here is my code:

export interface IMap<T> {
map: Map<string, Array<T>>;
}

The JSON answer looks like this. It is Map< String,List<? >> in Java.

{
    "somenumbers": [
        20,
        40
    ],
    "somemorenumbers": [
        71,
        111
    ]
}

Now I tried to map it the following way:

public getValues(
    paramList: Array<string>
): Observable<IMap<any>> {
    const url = `url`;
    let params = new HttpParams();
    for (let s of paramList) {
        params = params.append("params", s);
    }

    return this.http.get<IMap<any>>(url, { params });
}

In the configservice I subscribe to the Method. How do I map the Response correctly so that the attribute map in data isn't undefined and can be accessed correctly?

this.configService
        .getValues(["somenumbers", "somemorenumbers"])
        .subscribe((data: IMap<any>) => {
            //outputs the JSON Data as Object{somenumbers: Array(2), somemorenumbers: Array(2), map: Map(0)}
            console.error(data); 
            console.error(data.map);//map is undefined => ERROR
        });

As you can see the map attribute is undefined. It is just a "map: Map(0)". Now... - How do I get the JSON stuff into the export interface? The map attribute should be filled with the associated values. I appreciate any help: :)

Answer 1

If I understood correctly you're expecting that by adding <IMap<any>> to the get call it will then return you the response mapped to IMap . It doesn't, check this issue.

What you can do instead is use rxjs map to map the response yourself like so:

return this.http.get<IMap<any>>(url, { params }).pipe(
  map((response) => {
    // map the response here
  })
);

Answer 2

I realized that I actually don't need the export interface and changed the code to the following. It took a while for me to get that xy is in ts the same as x["y"]. Via response[parameter] I can access the attributes of the response Object dynamically - exactly what I needed.

public getValues(
    paramList: Array<string>
): Observable<Map<string, Array<any>>> {
    const url = `url`;
    let params = new HttpParams();
    for (let s of paramList) {
        params = params.append("params", s);
    }

    return this.http
        .get<any>(url, {
            params
        })
        .pipe(
            map(response => {
                let toReturn = new Map<string, any[]>();
                for (let parameter of paramList) {
                    toReturn.set(parameter, response[parameter]);
                }
                return toReturn;
            })
        );
}

The mapping works now. The JSON answer is still the same as in the question above.

this.configService
        .getValues(["somenumbers", "somemorenumbers"])
        .subscribe((data: Map<string, any[]>) => {

            console.error(data);
        });

Thanks for the help and links @M Mansour !