Display HashMap<String, Object> in Angular6 received from Rest API

Question

I'm trying to display the content of HashMap received from my controller, however I get an empty map.

this is my controller:

@PostMapping(value = "getAllUsers")
public HashMap<String, Object> getAllUsers(@RequestBody String s)
{
    List<User> list = userRepository.getAll(s);

    HashMap<String, Object> userList = new HashMap<String, Object>();
    userList.put("list", list);
    userList.put("total", list.size());

    return userList;
}

and this is my angular code:

 getUsers() {

    this.userService.getUsers("canada").subscribe((data) => {
        console.log(data); // this returns an empty object
        data.forEach((value: string, key: string) => { // returns an error which is forEach is not a function
            console.log(key, value);
        });
        this.userList = data; // empty
        console.log(this.userList);
    });
}

this is my api service:

let URL = "api/v1";
getUsers(country: String): Observable<any> {
    return this.http.post(URL + "getAllUsers", country);
}

I want to know how to manipulate and iterate the HashMap received from my controller. Thank you in advance.

Answer 1

Typescript is assuming the response as an Object of type any instead of a Map, so Try this:

Object.entries(data).forEach((value: string, key: string) => { 
      console.log(key, value);
});

Answer 2

The point here is not HashMap iteration but your are getting empty response data even here.

 this.userService.getUsers("canada").subscribe((data) => {
       console.log(data);         // this returns an empty object

Add @ResponseBody

 @PostMapping(value = "getAllUsers")
 @ResponseBody
 public HashMap<String, Object> getAllUsers(@RequestBody String s)

Now coming to iteration once you get the response which is not empty there are multiple ways to iterate map.

  Object.keys(data).forEach(key => {

    console.log(key, data[key]);
  });

=> Better to use Http convention of using get to fetch data over post. Although data will still be received in Post but prefer get().

Answer 3

You are performing a POST request but in your use case you should use the GET http method in order to retrieve a resource. POST http method is used to add a resource. You have to change your controller to use @GetMapping()

@GetMapping("/getAllUsers")
public HashMap<String, Object> getAllUsers(@PathVariable String s)
{
    List<User> list = userRepository.getAll(s);

    HashMap<String, Object> userList = new HashMap<String, Object>();
    userList.put("list", list);
    userList.put("total", list.size());

    return userList;
}

You should also change your parameter to that controller from @RequestBody to @PathVariable

@PathVariable annotation is used to receive bind the URI variable to the method parameter.

@RequestBody annotation binds the content sent in (POST / PUT) request body with the annotated variable. (Generally, you can only use @RequestBody for the requests which can have 'body' content e.g. POST or PUT.)

You can read about HTTP Methods here.