Issue
I'm new to Angular.I have some problems regarding the passing data between back-end and front-end.I have a system which passes booking data to the back-end to be saved in the database.Here is my code,
bookings.ts file
export class Bookings{
departure:number;
arrival:string;
departd:string;
returnd:string;
classtype:string;
adults:number;
children:number;
infants:number;
}
booking.component.ts
export class BookingComponent implements OnInit {
booking:Bookings =new Bookings();
message:Observable<Object>;
constructor(private flightService:FlightService, private router: Router) { }
ngOnInit(): void {
}
save() {
this.flightService.search(this.booking).subscribe(data => console.log(data), error => console.log(error));
// this.flightService.search(this.booking)
this.booking = new Bookings();
this.bookingData();
}
onSubmit() {
this.save();
}
bookingData() {
this.router.navigate(['/bookings']);
}
}
flight.service.ts
export class FlightService {
private baseUrl='http://localhost:8080/flight/destinations';
constructor(private http: HttpClient) { }
getDestinations(): Observable<Destination[]>{
// return this.http.get(`${this.baseUrl}`);
return this.http.get<Destination[]>(this.baseUrl);
}
search(booking: Object): Observable<any> {
return this.http.post(`${this.baseUrl}`, booking);
}
}
FlightData Controller class
@CrossOrigin(origins = "http://localhost:4200")
@RestController
@RequestMapping("/flight")
public class FligthtDataController {
@Autowired
private FligthtDataServices flightDataServices;
@GetMapping("/destinations")
public List<Destinations> getdestinationData() {
List<Destinations> ds=flightDataServices.getDestinations();
return ds;
}
@PostMapping("/destinations")
public String serchBooking(@RequestBody Booking booking) {
System.out.println("Departure:"+booking.getDeparture());
System.out.println("Arrival:"+booking.getArrival());
System.out.println("Depart Date:"+booking.getDepartd());
System.out.println("Return Date:"+booking.getReturnd());
System.out.println("Class:"+booking.getClasstype());
System.out.println("Adults"+booking.getAdults());
System.out.println("Children"+booking.getChildren());
System.out.println("Infants"+booking.getInfants());
return "Successfuly saved the data";
}
}
The problem with me is when I return a String from the back-end in the Post method as shown above the data from the front-end comes to the post method as expected but it gives a error in the console as follows
But when I return a number as below it doesn't show any error the value also printed on the console
@PostMapping("/destinations")
public int serchBooking(@RequestBody Booking booking) {
System.out.println("Departure:"+booking.getDeparture());
System.out.println("Arrival:"+booking.getArrival());
System.out.println("Depart Date:"+booking.getDepartd());
System.out.println("Return Date:"+booking.getReturnd());
System.out.println("Class:"+booking.getClasstype());
System.out.println("Adults"+booking.getAdults());
System.out.println("Children"+booking.getChildren());
System.out.println("Infants"+booking.getInfants());
return 123;
}
No error in console as shown below the number also printed.
please help me to understand this. and help me to resolve this issue.Thank you
Solution
A string is not valid JSON that can be ran through JSON.parse
, but a number is.
You can see examples here:
// valid, will return 123
console.log(JSON.parse(123));
// invalid, will error
try {
console.log(JSON.parse("Sucessfully saved the data"));
} catch(e) {
console.log("Error", e)
}
// proper JSON "object" from the server
console.log(JSON.parse(`{"message": "Sucessfully saved the data"}`));
You need to return a proper JSON string from your server, like the one in the example, then read the message
property from that response.
Answered By - cjd82187
Answer Checked By - Robin (JavaFixing Admin)