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)

Well in Development tools I can see only error. I updated the post. — Peter Penzov
– Peter Penzov, Commented Dec 18, 2018 at 23:02
Can you get the response in angular's subscription?Check using the console.log() and if you get the response then please comment the JSON format of response. — Omkar Jadhav
– Omkar Jadhav, Commented Dec 24, 2018 at 6:21
try to change your backend, instead of Map send list of object of same type what you are expecting in angular. — ashish pal
– ashish pal, Commented Dec 27, 2018 at 9:29

kctang · Accepted Answer · 2018-12-22 01:27:54Z

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.

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.
If you see errors, check server side (Java/Spring) log/exceptions.
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.
Once confirmed that server side code works as expected, then integrating Angular code should be easier.

Hope this helps. Good luck!

user3145373 ツ · Accepted Answer · 2018-12-29 03:41:09Z

2

+50

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.

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

edited Dec 29, 2018 at 3:41

answered Dec 28, 2018 at 6:38

user3145373 ツ

8,1857 gold badges51 silver badges66 bronze badges

Collectives™ on Stack Overflow

Display Angular drop down list from Java HashMap

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related