Display Angular drop down list from Java HashMap

Question

I want to display HashMap in Angular app using GET request from Spring Application. I tried this:

Spring code:

@GetMapping("gateways")
public ResponseEntity<?> getGateways() {
    Map<Integer, String> list = new HashMap<>();
    list.put(1, "Bogus");
    return ok(list.put);
}

Angular Service:

getContractGatewaysList(): Observable<Array<ContractGatewaysList>> {
    return this.http.get<Array<ContractGatewaysList>>(environment.api.urls.contracts.getContractGateways);
  }

Angular component:

gateways: ContractGatewaysList[];

this.contractService.getContractGatewaysList()
      .subscribe(value => {
        if (value != null) {
          this.gateways = value;
        }
      });

Interface:

export interface ContractGatewaysList {
  id: number;
  name: string;
}

HTML code:

<div class="form-group gateway">
    <div class="input-group-prepend">
      <label for="merchant_id">Gateway</label>
    </div>
    <select class="custom-select" name="gateway" [(ngModel)]="contract.gateway" id="gateway" required>
      <option selected>Please Select...</option>
      <option [value]="gateway.id" *ngFor="let gateway of gateways">{{ gateway.name }}</option>
    </select>
  </div>

But I get empty list. What is the proper way to convert the Java Hashmap and display the values in Angular drop down menu? Can you show me working code example, please because I'm stuck with this problem?

I get this error:

ERROR Error: Cannot find a differ supporting object '3873648042962238500' of type 'number'. NgFor only supports binding to Iterables such as Arrays.
    at NgForOf.push../node_modules/@angular/common/fesm5/common.js.NgForOf.ngDoCheck (common.js:3152)
    at checkAndUpdateDirectiveInline (core.js:9246)
    at checkAndUpdateNodeInline (core.js:10507)
    at checkAndUpdateNode (core.js:10469)
    at debugCheckAndUpdateNode (core.js:11102)
    at debugCheckDirectivesFn (core.js:11062)
    at Object.eval [as updateDirectives] (ContractNewComponent.html:50)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:11054)
    at checkAndUpdateView (core.js:10451)
    at callViewAction (core.js:10692)

Answer 1

The Java/Spring code looks incorrect. I wonder if the statement return ok(list.put) even compiles as put is a method.

The Error: Cannot find a differ supporting object... error you provided is a client side error and would not be very useful if the root cause is at the server (i.e. REST API call).

Instead of looking at this as an 'Angular' related issue, I suggest confirming that the server is actually returning a proper JSON object with key value pairs.

1. Make sure server side is returning data as expected BEFORE you even look at Angular/client side codes. Directly access the spring boot REST API using Chrome or REST API clients like Postman.

2. If you see errors, check server side (Java/Spring) log/exceptions.

3. Here is an example on how to convert a Java map object to JSON data that can be consumed by clients. As with Spring framework, there are multiple ways, so do check the official documentation for details.

4. Once confirmed that server side code works as expected, then integrating Angular code should be easier.

Hope this helps. Good luck!

Answer 2

Your response will be something like:

{1:"Bogus"}

It's not possible to map this flat JSON to gateways as it's of array type.

Solution:

1. You need to iterate response JSON and by key fetch it's value and push data to gateways.

for (var key in responseObject) {
  console.log(key, responseObject[key]);
  // here push data `gateways`, you will find lots of tutorial to push data in array
}

You can even have var keys = Object.keys(yourobject); and then you can iterate this keys and get value of specific key from your response object. Choice is yours, what you need to implement.

2. You can send angular compatible response from Java/Spring so it will bind to gateways directly if all the structure and keys are valid.