如何在 Typescript 中获取 Java Map 的值答案

【问题标题】：How to get value of Java Map in Typescript如何在 Typescript 中获取 Java Map 的值
【发布时间】：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 } ;

标签： java angular spring typescript spring-boot

【解决方案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 是非常糟糕的做法。