Question

嗨，我正在尝试将从Spring Boot返回的json对象映射到打字稿中的映射，但是没有人能提出一种正确的操作方法，我附上了代码片段，以便更好地理解和举例。

哈希图从springboot返回到有角度的前端

@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));
      }
    })

EXAMPLE 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

Answer 1

您可以使用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"

Answer 2

期望您从后端得到一个逃脱的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"

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

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

2 个答案: