Showing Angular dropdown menu using Java HashMap

Question

Showing Angular dropdown menu using Java HashMap

I am trying to fetch and display data from a HashMap in my Angular application by making a GET request to a Spring Application. Here is the code I have tried:

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>

However, I am facing an issue where the list appears empty. I need help with properly converting the Java HashMap and displaying the values in the dropdown menu. Can someone provide me with a working code example as I am stuck on this problem?

The error message I receive is:

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)

angular spring typescript angular6

Answer 1

Answer №1

The Java and Spring code appears to have an issue. I am questioning whether the statement return ok(list.put) will even compile, considering that put is a method.

The error message

Error: Cannot find a differ supporting object...

seems to be a client side error and may not provide much insight if the root cause lies within the server (such as a REST API call).

Instead of attributing this problem solely to 'Angular', it would be beneficial to verify if the server is indeed returning a valid JSON object with key-value pairs.

Prioritize confirming that the server is returning data correctly BEFORE delving into Angular or client-side code. Try accessing the Spring Boot REST API directly using Chrome or dedicated REST API clients like Postman.
If errors persist, investigate the server side logs or exceptions in the Java and Spring environment.
Refer to this example to understand how to convert a Java map object into JSON data for client consumption. Since there are various approaches in the Spring framework, consult the official documentation for more information.
Once you have validated that the server side code is functioning properly, integrating Angular code should proceed smoothly.

I hope this guidance proves useful. Best of luck!

Answer 2

The Java and Spring code appears to have an issue. I am questioning whether the statement return ok(list.put) will even compile, considering that put is a method.

The error message

Error: Cannot find a differ supporting object...

seems to be a client side error and may not provide much insight if the root cause lies within the server (such as a REST API call).

Instead of attributing this problem solely to 'Angular', it would be beneficial to verify if the server is indeed returning a valid JSON object with key-value pairs.

Prioritize confirming that the server is returning data correctly BEFORE delving into Angular or client-side code. Try accessing the Spring Boot REST API directly using Chrome or dedicated REST API clients like Postman.
If errors persist, investigate the server side logs or exceptions in the Java and Spring environment.
Refer to this example to understand how to convert a Java map object into JSON data for client consumption. Since there are various approaches in the Spring framework, consult the official documentation for more information.
Once you have validated that the server side code is functioning properly, integrating Angular code should proceed smoothly.

I hope this guidance proves useful. Best of luck!

Answer 3

Answer №2

Your reply will look something like:

{1:"Bogus"}

Converting this flat JSON to gateways is not possible since it's an array type.

Solution:

1. To map the response JSON, you need to iterate through the keys, fetch their values, and push the data to gateways.

for (var key in responseObject) {
  console.log(key, responseObject[key]);
  // here push data `gateways`, there are plenty of tutorials on how to push data into an array
}

You can also utilize

var keys = Object.keys(yourobject);

to iterate through these keys and retrieve a specific value from your response object. The choice is yours on what implementation you prefer.

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

Answer 4

Your reply will look something like:

{1:"Bogus"}

Converting this flat JSON to gateways is not possible since it's an array type.

Solution:

1. To map the response JSON, you need to iterate through the keys, fetch their values, and push the data to gateways.

for (var key in responseObject) {
  console.log(key, responseObject[key]);
  // here push data `gateways`, there are plenty of tutorials on how to push data into an array
}

You can also utilize

var keys = Object.keys(yourobject);

to iterate through these keys and retrieve a specific value from your response object. The choice is yours on what implementation you prefer.

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

Showing Angular dropdown menu using Java HashMap

Answer №1

Answer №2

Similar questions

Can HTML variables be accessed in lines of code before they are declared in HTML?

Resolving type error issues related to using refs in a React hook

Develop a TypeScript utility function for Prisma

Utilizing an InjectionToken to supply another InjectionToken

Navigating through template files in Angular 2 components

Error: Value Loop Detected in AngularFire Document ID

Discover the geolocation data for post code 0821 exclusively in Australia using Google Maps Geocoding

Using any random function as a property value in a TypeScript React Component

Revising a conceivably intricate template

Gathering the output from every function within an array of functions

Loop through every item in Typescript

Unable to utilize Msal Angular 9 for accessing a personalized API

The compatibility between jQuery serialize and Angular Material tabs is not optimal

Determine the type of input and output based on another argument

Displaying errors from an API using Angular Material mat-error

experimenting with asynchronous promises in Jasmine to test Angular 2 services

The revalidation process in react-hook-form doesn't seem to initiate

What is the best way to combine API calls using rxJs subscribe and map in Angular?

Facing issues with module resolution while attempting to debug in VSCode

Uploading multiple images using AngularJS and Spring framework