如何在 Typescript 中获取 Java Map 的值

Posted 2023-02-27

【中文标题】如何在 Typescript 中获取 Java Map 的值

【英文标题】：How to get value of Java Map in Typescript

【发布时间】：2020-11-27 21:53:22

【问题描述】：

我在应用程序中使用 Spring boot 作为后端，使用 Angular 7 作为前端。我必须发送地图作为回应。例如，说：

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

我通过响应 DTO 将此映射传递给 angular，即：

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

现在在 Angular 上，我将其用作：

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

我可以从 additionalResponse 获得价值，但是当我尝试在 AdditionalResponse 中使用 get 函数时，它给了我 undefined 价值。我应该怎么做才能使用 additionalResponse 作为 Angular 上的地图？

编辑： 我在 Angular 中使用后端响应：

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



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

并且，尝试用作 this.response.additionalResponse.get('key1') 并且我获得了 undefined 的价值，但我从 获得了价值>this.response.additionalResponse

在 Postman 上，我得到的回复是：

  "additionalResponse": 
    "key1": "value2",
    "key2": "value2"
  

【问题讨论】：

数据是如何序列化的？你检查过curl/Insomnia/Postman 的回复了吗？如果数据被序列化为 JSON，它应该“简单地工作”。

是的，我得到的响应是： "additionalResponse": "key1": "value2", "key2": "value2" 但是当我尝试使用 like map 使用它时。 get('key1') ，我得到未定义的值。

您的响应是 JSON 类型，而不是 Map

能否请您在前端包含您从后端接收响应的代码？

[key: string]: any 在功能上等同于 Map，如果你用这样的花括号将它包裹起来，它应该可以工作：additionalResponse: [key: string]: any ;

【参考方案1】：

遍历 response.additionalResponse 对象响应并创建新映射并提取键，如下所示：

var mapResp = new Map();
for(key in response.additionalResponse)
    mapResp.set(key, response.additionalResponse[key]);

mapResp.get('key1'); // this will give you value2

【参考方案2】：

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


const  additionalResponse  = response;

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

或者您可以将其转换为地图：

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)
)

[更新]

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

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

【讨论】：

响应来自后端，我无法在 typescript 中定义它。

我已将响应变量定义为示例）您应该使用来自回调的变量。请查看更新的答案

【参考方案3】：

我得到了解决方案，我将 Map 替换为 any 并且可以从 this.response.additionalResponse.key1，但不知道这是否是一个好习惯。正如上面评论中所说，这可能是由于 JSON 类型，但我真的没有找到相应声明它的方法。

【讨论】：

编辑：我也可以用这个 additionalResponse: [key: string]: any ;

使用any 是非常糟糕的做法。