I am making a POST request from my frontend (Angular) to my backend (Java). The post request is sent as a JSON object (consisting of multiple arrays) and in Java, should be matched to an object where the arrays are intended to be lists. Here's an example code to represent the problem since this is not the actual code as it belongs to work and do not want any confidentiality issues so this is simply to represent the issue as close to the original code as possible (worth noting that there are many schools stored and for argument's sake, they can be uniquely identified by their students and lessons taught and using this info, we want to get the classrooms present at that school):
Angular service api call:
getSchool(students, lessons): Promise<School> {
return this.http.post('sampleurl/classroom', JSON.stringify({students:students, lessonsTaught:lessons}), {headers:this.headers})
.toPromise()
.then(res => <School>res.json())
.catch(this.handleError);
}
Angular School model:
export class School {
public students:any;
public lessonsTaught:string[];
public classrooms:string[];
constructor() {}
}
Java School Object:
public class School {
private List<Student> students;
private List<String> lessonsTaught;
private List<String> classrooms;
public School() {}
public List<Student> getStudents() {
return students;
}
public void setStudents(List<Student> students) {
students = this.students;
}
public List<Stream> getLessonsTaught() {
return students;
}
public void setLessonsTaught(List<String> lessonsTaught) {
lessonsTaught = this.lessonsTaught;
}
public List<String> getClassrooms() {
return classrooms;
}
public void setClassroom(List<String> classroom) {
classroom = this.classroom;
}
Java SearchSchool Object:
public class SearchSchool {
private List<String> students;
private List<String> lessonsTaught;
public School() {}
public List<Student> getStudents() {
return students;
}
public void setStudents(List<Student> students) {
students = this.students;
}
public List<Stream> getLessonsTaught() {
return students;
}
public void setLessonsTaught(List<String> lessonsTaught) {
lessonsTaught = this.lessonsTaught;
}
Java endpoint:
@RequestMapping(value="sampleurl/classroom", method = RequestMethod.POST)
public School(@RequestBody SearchSchool searchSchool) {
return service.getSchool(searchSchool);
}
So effectively, I am using the SearchSchool object in Java to uniquely identify the school and return it. However, the arrays being passed to the endpoint, don't seem to be matched to lists like the SearchSchool object requires (I have put a breakpoint on the entry in the endpoint and it is not even being executed). Having played around with the code a bit, the matching of the student's string array in the Angular to the student's string list in Java seems to be working fine and the issue seems to be matching the array of lessons taught to a list of lessons taught which gives me the following runtime errors the Developer's console in Chrome:
An error occurred syntaxError: service.ts: 163
Unexpected token A in JSON at position o
at JSON.parse (<anonymous>)
at Response.Body.json (http.ess.js:796)
at duration service.ts:54
at ZoneDelegate.invoke (zone.js:365)
at object.onInvoke (core.ess.js:4145)
at ZoneDelegate.invoke (zone.js:364)
at zone.run (zone.js:125)
at zone.js:760
at ZoneDelegate.invokeTask (zone.js:398)
at object.on InvokeTask (core.ess.js:4136)
at ZoneDelegate.invokeTask (zone.js:397)
at Zone.runTask (zone.js:165)
at drainMicroTaskQueue (zone.js:593)
at XMLHttpRequest. ZoneTask.invoke (zone.js:464)
and:
ERROR Error: Uncaught (in promise): core.es5.js:1085
Unexpected token A in JSON at position o
at resolvePromise (zone.js:683) [angular]
at :8080/gar-app/polyfis:7034:17 [angular)
at object.onInvokeTask (core.ess.js:4136) [angular]
Does anyone know why matching from the array in the frontend to the list in the backend is causing such a problem?