CODEWITHSUNDEEP
javaangulartypescriptspring-boot
Shivam Singh
Shivam Singh

Reputation: 159

Map json object returned from springboot to map in typescript

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

Upvotes: 0

Views: 1311

Answers (2)

GeofoxCoding
GeofoxCoding

Reputation: 305

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.

Upvotes: 1

Daniel B
Daniel B

Reputation: 8879

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"

Upvotes: 1

Related Questions