How to get value of Java Map in Typescript

Question

I am using Spring boot as backend and Angular 7 as frontend in an application. I have to send map as response. For instance, say:

  Map<String, Object> additionalResponse = new HashMap<>() {
        {
            put("key1","value2");
            put("key2","value2");
           
        }
    };

I pass this map via response DTO to angular which is:

public class SearchResponseDto implements Serializable {
private Map<String, Object> additionalResponse;
}

Now on angular, I am using it as:

 export class SearchResponseDto {
     additionalResponse: Map<string, any>;
   }

I can get value from additionalResponse but when I try to use get function in additionalResponse, it is giving me undefined value. What should I do to use additionalResponse as Map on angular?

Edit: I am using the backend response in Angular as:

      fetchData() {
        fetchResponse().
           .subscribe(
              response => {
     
                this.response = response;
          
            },
           errorResponse => {
       
          },
       );
      }



 fetchResponse(): Observable<SearchResponseDto> {
            return this.http.post<SearchResponseDto>(
              <api-endpoints>
            );
          }

And, trying to use as this.response.additionalResponse.get('key1') and I am getting value as undefined but I am getting value from this.response.additionalResponse

On Postman, I am getting response as:

{
  "additionalResponse": {
    "key1": "value2",
    "key2": "value2"
  }
}

Answer 1

const response= {
  "additionalResponse": {
    "key1": "value2",
    "key2": "value2"
  }
}

const { additionalResponse } = response;

const map = Object.entries(additionalResponse).map(([key, value])=>{
  console.log(key, value)
})

OR you can convert it to the Map:

const map = new Map();
const response= {
  "additionalResponse": {
    "key1": "value2",
    "key2": "value2"
  }
}

const { additionalResponse } = response;

Object.entries(additionalResponse).forEach(([key, value])=>{
  console.log(key, value)
  map.set(key, value)
})

[UPDATED]

     fetchData() {
        fetchResponse().
           .subscribe(
              response => {
     
                const { additionalResponse } = response;

               Object.entries(additionalResponse).forEach(([key, value])=>{
               console.log(key, value)
               map.set(key, value)
               })
          
            },
           errorResponse => {
       
          },
       );
      }

Answer 2

I got the solution, I replaced Map<string, any> with just any and can get value from this.response.additionalResponse.key1, don't know if it's a good practice though. As said in the above comment, it might be due to JSON type but I really not finding a way to declare it accordingly.

Answer 3

Iterate throught the response.additionalResponse object response and create new map and extract the key like below:

var mapResp = new Map();
for(key in response.additionalResponse){
    mapResp.set(key, response.additionalResponse[key]);
}
mapResp.get('key1'); // this will give you value2