如何在 Angular 中调用 Java HTTP POST 方法

Question

I have the following problem: I created a Java project using Spring boot and MyBatis, I have some classes (for example DirezioneRegionale), with his mapper interface for MyBatis (with the correspondant XML file), his service class and a controller. I tested the HTTP calls and they works (I'm able to see the result of my queries and they are correct).

You can see how I implemented the Java and MyBatis part here: Return a List<MyClass> in MyBatis

Now the problem is that this is part of a greater project, in which i use Angular 8, I should be able to call the HTTP POST method and to have returned, using JSON I suppose, the equivalent of my Java class but in TypeScript.

To do that I have tried the following thing:

In the app.component.ts I have added:

allDirReg = this.piuService.getAllDirReg();

In the app.component.html I have added:

<p>{{ allDirReg }}</p>

So I expected to have returned a list with the id values and description values of my DirezioneRegionale object, but only

[object Object]

appears.

I even tried to change, in the app.component.ts file, the line in this way:

allDirReg = JSON.stringify(this.piuService.getAllDirReg());

But the result is:

{
   "_isScalar": false,
   "source": {
      "_isScalar": false,
      "source": {
         "_isScalar": false,
         "source": {
            "_isScalar": true,
            "value": {
               "url": "localhost:8081/getAllDirRegs",
               "body": null,
               "reportProgress": false,
               "withCredentials": false,
               "responseType": "json",
               "method": "POST",
               "headers": {
                  "normalizedNames": {},
                  "lazyUpdate": null,
                  "headers": {}
               },
               "params": {
                  "updates": null,
                  "cloneFrom": null,
                  "encoder": {},
                  "map": null
               },
               "urlWithParams": "localhost:8081/getAllDirRegs"
            }
         },
         "operator": {
            "concurrent":1
         }
      },
      "operator": {}
   },
   "operator": {}
}

my service's code in Angular is the following:

  getAllDirReg() {
    const doneCallback = this.loadingService.startLoading();
    return this.http.post<any>(`localhost:8081/getAllDirRegs`, {}).pipe(finalize(doneCallback))
  }

EDIT: This is my Java DirezioneRegionaleController:

@RestController
public class DirezioneRegionaleController {

    @Autowired
    private DirezioneRegionaleService direzioneRegionaleService;

    @PostMapping("getAllDirRegs")
    @ResponseBody
    public ResponseEntity<?> getAllDirRegs() {
        List<DirezioneRegionale> allDirRegs = direzioneRegionaleService.getAllDirRegs();
        if (null == allDirRegs) {
            return ResponseEntity.notFound().build();
        }

        List<JSONObject> allDirRegsJSON = new ArrayList<JSONObject>();
        for (DirezioneRegionale dr : allDirRegs) {
            JSONObject drJSON = new JSONObject();
            drJSON.put("id", dr.getID());
            drJSON.put("description", dr.getDescription());
            allDirRegsJSON.add(drJSON);
        }

        return new ResponseEntity<List<JSONObject>>(allDirRegsJSON, HttpStatus.OK);

        // return ResponseEntity.ok(allDirRegs);
    }
}

EDIT 2:

What I expect to be returned:

[{"description":"DIR REG CAMPAN BASIL CALABR PUGLIA","direzioniCommerciali":null,"id":"09560"},{"description":"DBT DIREZIONE MILANO E PROVINCIA","direzioniCommerciali":null,"id":"09546"},{"description":"DBT DIR V FVG TR AA","direzioniCommerciali":null,"id":"09547"},{"description":"DBT DIR MILANO E PROVINCIA","direzioniCommerciali":null,"id":"09546"},{"description":"DR EM RO MAR ABR MOL","direzioniCommerciali":null,"id":"09548"},{"description":"DBT DIR V FVG  TR AA","direzioniCommerciali":null,"id":"09547"},{"description":"DBT DIREZIONE PIEMONTE V D'AOSTA LIGURIA","direzioniCommerciali":null,"id":"09544"},{"description":"DR FINAN INST","direzioniCommerciali":null,"id":"11471"},{"description":"DIREZIONE RETE SANPAOLO","direzioniCommerciali":null,"id":"00FIT"},{"description":"DR CAM BA CAL PU SIC","direzioniCommerciali":null,"id":"09560"},{"description":"DIR.GEN.BANCA APULIA","direzioniCommerciali":null,"id":"00FIT"},{"description":"DR TOSC UMB LAZ SARD","direzioniCommerciali":null,"id":"09549"},{"description":"DIREZIONE GENERALE -  BANCO DI NAPOLI","direzioniCommerciali":null,"id":"00FIT"},{"description":"COORDINAMENTO SERVIZIO GESTORE REMOTO","direzioniCommerciali":null,"id":"20233"},{"description":"DBT DIREZIONE LOMBARDIA","direzioniCommerciali":null,"id":"09545"},{"description":"DIREZIONE GENERALE","direzioniCommerciali":null,"id":"00FIT"},{"description":"DBT DIR CAMP BASIL CAL E PUG","direzioniCommerciali":null,"id":"09560"},{"description":"DBT DIR VEN FVG E TR AA","direzioniCommerciali":null,"id":"09547"},{"description":"DBT DIR MI E PROV","direzioniCommerciali":null,"id":"09546"},{"description":"DIR REG TOSCANA E UMBRIA","direzioniCommerciali":null,"id":"09549"},{"description":"DIR REG LAZIO SARDEGNA E SICILIA","direzioniCommerciali":null,"id":"09590"},{"description":"DIREZIONE GENERALE CRFORLI' E ROMAGNA","direzioniCommerciali":null,"id":"00FIT"},{"description":"DR CAM BA CAL PU","direzioniCommerciali":null,"id":"09560"},{"description":"DR GLOBAL CORPORATE","direzioniCommerciali":null,"id":"11474"},{"description":"DR TOS UMB LAZ E SAR","direzioniCommerciali":null,"id":"09549"},{"description":"D.R.CA.BA.CAL.PU.","direzioniCommerciali":null,"id":"09560"},{"description":"DBT DIREZIONE VEN FRIULI VG E TRENTIN AA","direzioniCommerciali":null,"id":"09547"},{"description":"DR TOS E UMB","direzioniCommerciali":null,"id":"09549"},{"description":"DIREZ. S. PAOLO B.CO DI NAPOLI","direzioniCommerciali":null,"id":"00FIT"},{"description":"DR GLOB CORP","direzioniCommerciali":null,"id":"11474"},{"description":"DBT DIR PIEM VAL D'AOS E LIG","direzioniCommerciali":null,"id":"09544"},{"description":"DIR REG EMILIA R,MARCHE,ABRUZZO,MOLISE","direzioniCommerciali":null,"id":"09548"},{"description":"DIREZIONE GENERALE CARISBO","direzioniCommerciali":null,"id":"00FIT"},{"description":"DBT DIR PIEM VDA LIG","direzioniCommerciali":null,"id":"09544"},{"description":"DBT DIR EMIL MAR ABR E MOL","direzioniCommerciali":null,"id":"09548"},{"description":"DIREZIONE GENERALE CR VENETO","direzioniCommerciali":null,"id":"00FIT"},{"description":"DIREZIONE GENERALE CR FVG","direzioniCommerciali":null,"id":"00FIT"},{"description":"DR LAZIO SAR E SIC","direzioniCommerciali":null,"id":"09590"},{"description":"DBT DIR LOMBARDIA","direzioniCommerciali":null,"id":"09545"}]

EDIT 3: My app.component.ts:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  constructor(
    private piuService: PiuService) {
  }
  title = "PIU Versione 2";

  allDirReg = this.piuService.getAllDirReg().subscribe(bodyRes => { this.allDirReg = JSON.stringify(bodyRes)})

}

Answer 1

The JSON you see there, is the structure of the Observable class

HttpClient.post method returns an Observable<T> on which you have to call the subscribe method to be able to treat the server response once you received it. It's an asynchronous mechanism.

example:

...
this.piuService.getAllDirReg().subscribe(bodyRes=> { this.allDirReg = bodyRes });
...

this is to access the response body, but you can access response itself. Take a look at HttpClient methods definitions. You can provide some options to get what you want.

EDIT: As you didn't provide options to the post method, I assumed that the default observe option was the HttpResponse. It seems that its the body itself. I've edited the example in consquences.

EDIT2: After seeing your component class, some things are wrong there. Version that should work:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit {
  constructor(private piuService: PiuService) {
  }
  title = "PIU Versione 2";
  allDirReg = "";

  ngOnInit() {
    this.piuService.getAllDirReg().subscribe(bodyRes => { this.allDirReg = JSON.stringify(bodyRes)})
  }
}

But in this case you work with a stringified model, which is not the main goal. You should use defined class models when working with TS and Angular. I suggest you to follow an Angular tutorial. You can try with Tour of Heroes which is the Google's introduction tutorial to Angular.