将从springboot返回的json对象映射到打字稿中的映射答案

【问题标题】：Map json object returned from springboot to map in typescript将从springboot返回的json对象映射到打字稿中的映射
【发布时间】：2021-01-09 09:37:39
【问题描述】：

嗨，我正在尝试将从 spring boot 返回的 json 对象映射到 typescript 中的地图，但没有人能提出正确的方法，我附上了代码 sn-p 以便更好地理解和示例。

hashmap 从 springboot 返回到 Angular 前端

@PostMapping("/uploadfile")
    public ResponseEntity<HashMap<String, String>> handleupload(@ModelAttribute uploaddto dto){
        
        System.out.println("sucessfull");
        //System.out.println(dto.getFiletoupload().size());
        //System.out.println(multifile.getOriginalFilename());
        System.out.println(dto.getSelectedfile().size()+" "+dto.getInstancekey());
        for(int i=0;i<dto.getSelectedfile().size();i++) {
            System.out.println(dto.getSelectedfile().get(i).getOriginalFilename());
        }
        HashMap<String, String> hashmap=new HashMap<String, String>();
        hashmap=(HashMap<String, String>) uploadtobucket(dto.getSelectedfile(),dto.instancekey);
        //System.out.println(dto.getSelectedfile().get(0).getSize());
        
        return ResponseEntity.status(HttpStatus.OK).body(hashmap);
    }

尝试将其保存为打字稿中的地图

this.uploadservice.uploadtoserver(data).subscribe((res:any)=>{
      if(res.body!=null){
        console.log(res.body);
        for(var values in res.body){
          this.map.set(values,res.body[values])
        }
        this.map.forEach((k,v)=>console.log(k+" ------"+v));
      }
    })

示例 json 对象

{"temp/tempintemp/Queues-Circular-Queue-Implementation-(Part-Two)-Source-Code.zip":"1600845901330278","temp/tempintemp/Sort-Algorithms-Sort-Algorithms-Challenge-#3-Source-Code.zip":"1600845901070176","temp/tempintemp/Queues-Queues-Challenge-Solution-Source-Code.zip":"1600845901182813","temp/tempintemp/Queues-Queues-(Array-Implementation)-Source-Code.zip":"1600845901611033"}

应该映射为

key   --------  value
temp/tempintemp/Queues-Circular-Queue-Implementation-(Part-Two)-Source-Code.zip    --------   1600845901330278
temp/tempintemp/Sort-Algorithms-Sort-Algorithms-Challenge-#3-Source-Code.zip    --------   1600845901070176
temp/tempintemp/Queues-Queues-Challenge-Solution-Source-Code.zip    --------   1600845901182813
temp/tempintemp/Queues-Queues-(Array-Implementation)-Source-Code.zip    --------   1600845901611033

【问题讨论】：

标签： java angular typescript spring-boot

【解决方案1】：

希望您从后端返回一个转义的 Json-String，因为 Javascript/Typescript 具有原生 Json 支持，所以首先从 Json 创建一个对象会更干净、更易读。

const rawData = "{\"temp\/tempintemp\/Queues-Circular-Queue-Implementation-(Part-Two)-Source-Code.zip\":\"1600845901330278\",\"temp\/tempintemp\/Sort-Algorithms-Sort-Algorithms-Challenge-#3-Source-Code.zip\":\"1600845901070176\",\"temp\/tempintemp\/Queues-Queues-Challenge-Solution-Source-Code.zip\":\"1600845901182813\",\"temp\/tempintemp\/Queues-Queues-(Array-Implementation)-Source-Code.zip\":\"1600845901611033\"}";
    
const parsedData = JSON.parse(rawData);
const dataMap = new Map(Object.entries(parsedData));
    
console.log(dataMap.get("temp/tempintemp/Queues-Circular-Queue-Implementation-(Part-Two)-Source-Code.zip"));
>>"1600845901330278"

从那里您可以使用 Object.entries() 方法，该方法在所有现代浏览器（不是 IE）中都受支持，该方法返回 kvp 数组 [[key1, value1], [key2, value2], ...] 的数组。该数组可以传递给 Map() 构造函数。这些都是简单的 ES6 特性，而不是 Typescript。但它当然是有效的 Typescript 代码。

【讨论】：

【解决方案2】：

您可以使用Object.entries 函数并将其传递给Map 构造函数。

const response = {
    {"temp/tempintemp/Queues-Circular-Queue-Implementation-(Part-Two)-Source-Code.zip":"1600845901330278","temp/tempintemp/Sort-Algorithms-Sort-Algorithms-Challenge-#3-Source-Code.zip":"1600845901070176","temp/tempintemp/Queues-Queues-Challenge-Solution-Source-Code.zip":"1600845901182813","temp/tempintemp/Queues-Queues-(Array-Implementation)-Source-Code.zip":"1600845901611033"}
}

const myMap = new Map(Object.entries(response));

console.log(myMap.get("temp/tempintemp/Queues-Circular-Queue-Implementation-(Part-Two)-Source-Code.zip"))
// Outputs "1600845901330278"

【讨论】：