POST List<object> from Angular2 Service to SpringBoot RestController - json

Question

enter image description hereHi I am actually making an application in Angular2(Frontend) and Springboot(Backend).
Uptill now , I have made many request from angular2 to Springboot i.e GET ;POST .I have even sent single Json object from Angular2 service to Springboot .
But currently I have a scenario where I need to send List of Json object from Angular2 to Springboot Rest controller .but unfortunately I am unable to do that .
what I am doing is
1: I have made an array of Type for which I need to send object in angular2 .
2:Pushed individual json object of same txpe into that array
3.Passed that array to service of angular2 in function call.
4.Finally made a POST request to Springboot Controller
below is my function to add JSon object to array :
updateChecked(value, event) {
// console.log(event.target.getAttribute('value'));
if (event.target.checked) {
// this.checkArr.push(event.target.getAttribute('value'));
this.checkArr.push({
profil_id: event.target.getAttribute('value'),
profil_name_lang: null,
profil_name_short: null,
geschaeftsbereich: null,
spezialberatung: null
});
} else if (!event.target.checked) {
//let indexx = this.checkArr.indexOf(event.target.getAttribute('value'));
let indexx = this.checkArr.findIndex(_profile => _profile.profil_id === event.target.getAttribute('value'));
this.checkArr.splice(indexx, 1);
console.log(indexx);
}
}
below is my Angular2 service function
private _deleteURL = 'http://localhost:9000//deleteprofile'
private headers1 = new Headers({'Content-Type' : 'application/x-www-form-urlencoded'});
deleteProfile(chckArr: Profile[]): Promise < Profile > {
// console.log("karan in delete");
console.log(chckArr);
return this.http
.post(this._deleteURL, chckArr, {
headers: this.headers1
})
.toPromise()
.then(res => res.json().data as Profile)
.catch(this.handleError);
}
below is my Springboot Funtion :-
#RequestMapping(method = RequestMethod.POST, value = "/deleteprofile")
public void deleteProfile(#RequestBody List < Profile > profile) { // function to delete an existing profiles
try {
// profileservice.deleteProfile(profile);
} catch (Exception e) {
e.printStackTrace();
}
}
entity class in Angular2
export class Profile {
profil_id: string;
profil_name_lang: string;
profil_name_short: string;
geschaeftsbereich: string;
spezialberatung: string;
}
entity class in Springboot
package permissionbackendservice.permissionmatrix.domain;
import java.io.Serializable;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.IdClass;
import javax.persistence.Table;
import com.fasterxml.jackson.annotation.JsonIgnore;
#Entity
//#IdClass(ActivityId.class)
#Table(name = "T_DM_VM_PROFILE_DIM")
public class Profile implements Serializable {
/**
*
*/
private static final long serialVersionUID = 1 L;
#Id #GeneratedValue(strategy = GenerationType.IDENTITY)
#Column(name = "PROFIL_ID")
private String profil_id = null;
#Column(name = "PROFIL_NAME_LANG")
private String profil_name_lang = null;
#Column(name = "PROFIL_NAME_KURZ")
private String profil_name_short = null;
#Column(name = "GESCHAEFTSBEREICH")
private String geschaeftsbereich = null;
#Column(name = "SPEZIALBERATUNG")
private String spezialberatung = null;
public String getProfil_id() {
return profil_id;
}
public void setProfil_id(String profil_id) {
this.profil_id = profil_id;
}
public String getProfil_name_lang() {
return profil_name_lang;
}
public void setProfil_name_lang(String profil_name_lang) {
this.profil_name_lang = profil_name_lang;
}
public String getProfil_name_short() {
return profil_name_short;
}
public void setProfil_name_short(String profil_name_short) {
this.profil_name_short = profil_name_short;
}
public String getGeschaeftsbereich() {
return geschaeftsbereich;
}
public void setGeschaeftsbereich(String geschaeftsbereich) {
this.geschaeftsbereich = geschaeftsbereich;
}
public String getSpezialberatung() {
return spezialberatung;
}
public void setSpezialberatung(String spezialberatung) {
this.spezialberatung = spezialberatung;
}
}
Error:

Answer 1

Change your Controller deleteProfile() method using an array for the #RequestBody like this :
#RequestMapping(method = RequestMethod.POST, value = "/deleteprofile")
public void deleteProfile(#RequestBody Profile[] profile) {
// function to delete an existing profiles
try {
// profileservice.deleteProfile(profile);
} catch (Exception e) {
e.printStackTrace();
}
}
If the profileservice.deleteProfile() require a list of profile instead of an array you can get it using Arrays.asList(profile)
On the client side, you have to send application/json request. So update your client request by deleting the header :
private _deleteURL = 'http://localhost:9000/deleteprofile'
deleteProfile(chckArr: Profile[]): Promise < Profile > {
// console.log("karan in delete");
console.log(chckArr);
return this.http
.post(this._deleteURL, chckArr)
.toPromise()
.then(res => res.json().data as Profile)
.catch(this.handleError);
}
It's not an issue but you forget trailing "/" in your url too.
UPDATE WITH WORKING CODE :
Rest controller in Person microservice :
#RestController
#RequestMapping("/api")
public class CustomController {
private static Logger log = LoggerFactory.getLogger(CustomController.class);
#Autowired
PersonService personService;
#RequestMapping(method = RequestMethod.POST, value = "/deleteperson")
public ResponseEntity deletePerson(#RequestBody Person[] persons) {
log.info(" Batch delete " + persons);
personService.delete(Arrays.asList(persons));
return ResponseEntity.ok().build();
}
}
Angular service in the gateway :
import {Injectable} from '#angular/core';
import {Http} from '#angular/http';
import {Person} from './person.model';
import {Observable} from 'rxjs/Observable';
#Injectable()
export class CustomService {
constructor(private http: Http) {
}
batchDelete(persons: Person[]): Observable<any> {
return this.http.post('/person/api/deleteperson', persons);
}
}
Delete method int person.component.ts:
batchDelete() {
console.log('--- delete ---- ' + JSON.stringify(this.people));
this.customService.batchDelete(this.people).subscribe( (res) => {
this.eventManager.broadcast({ name: 'personListModification', content: 'Delete them all'});
});
}
CODE ON GITHUB
Results :
BEFORE
AFTER DELETE