将从Spring Boot返回的JSON对象映射到TypeScript中的Map。

huangapple go评论85阅读模式
英文:

Map json object returned from springboot to map in typescript

问题

// hashmap returned from springboot to angular frontend
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 object
{
  "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"
}
// should be mapped as
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

(Note: The provided content includes code snippets and JSON data, which are not translated as per your request. If you have specific questions about the translation or need assistance with any part, feel free to ask.)

英文:

hi i am trying to map a json object returned from spring boot to a map in typescript but no luck can anyone suggest a correct way of doing it i am attaching code snippet for better understanding and an example.

hashmap returned from springboot to angular frontend

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

trying to save it as a map in typescript

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 object

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

should be mapped as

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

答案1

得分: 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"))
// 输出 "1600845901330278"
英文:

You can use the Object.entries function and pass it to the Map constructor.

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"

答案2

得分: 1

期望从后端获得一个转义的 Json 字符串,为了使代码更清晰易读,首先从 Json 创建一个对象,因为 Javascript/Typescript 原生支持 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)中都受支持,它返回一个键值对数组的数组 [[key1, value1], [key2, value2], ...]。这个数组可以传递给 Map() 构造函数。这些都是简单的 ES6 特性,而不是 Typescript。但当然,这也是有效的 Typescript 代码。

英文:

expecting you get an escaped Json-String back from your backend it's cleaner and more readable to first make an object from Json because Javascript/Typescript has native Json support.

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"

From there you can use Object.entries() method which is supported in all modern browers (not IE) which returns an array of kvp arrays [[key1, value1], [key2, value2], ...]. This array can be passed to the Map() constructor. These are all simple ES6 features not Typescript. But its of course valid Typescript code.

huangapple
  • 本文由 发表于 2020年9月23日 16:11:07
  • 转载请务必保留本文链接:https://go.coder-hub.com/64023657.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定