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"
  }
}

How is the data serialized? Have you checked the responses through curl/Insomnia/Postman? If the data is serialized as JSON, it should "simply work". — Turing85
– Turing85, Commented Aug 7, 2020 at 14:33
Yes, I am getting response as: {"additionalResponse": { "key1": "value2", "key2": "value2" } } But when I try to use it using like map.get('key1') , I am getting undefined value. — Yashasvi Raj Pant
– Yashasvi Raj Pant, Commented Aug 7, 2020 at 14:37
Can you please include the code where you receive the response from the backend in the frontend? — Turing85
– Turing85, Commented Aug 7, 2020 at 14:39
[key: string]: any is functionally equivalent of Map<string, any>, it should work if you wrap it with curly braces like this: additionalResponse: { [key: string]: any }; — Berk Kurkcuoglu
– Berk Kurkcuoglu, Commented Aug 7, 2020 at 16:55

captain-yossarian from Ukraine · Accepted Answer · 2020-08-07 16:59:18Z

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 => {
       
          },
       );
      }

response is coming from the backend, I cannot define it in typescript.
I have defined response variable as example ) You should use the one from callback. Please see updated answer

Shriram · Accepted Answer · 2020-08-07 15:42:54Z

0

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

answered Aug 7, 2020 at 15:42

Shriram

12 bronze badges

Comments

Yashasvi Raj Pant · Accepted Answer · 2020-08-07 16:54:38Z

0

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.

answered Aug 7, 2020 at 16:54

Yashasvi Raj Pant

1,4445 gold badges15 silver badges41 bronze badges

2 Comments

Yashasvi Raj Pant Over a year ago

Edit: I can use this as well additionalResponse: { [key: string]: any };

captain-yossarian from Ukraine Over a year ago

Using any is the very bad practice.

Collectives™ on Stack Overflow

How to get value of Java Map in Typescript

3 Answers 3

2 Comments

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Related