angular http post send complex objects - json

Question

My Service
public submitBooking(createBooking: CreateBooking) {
const body = this.getSaveBookingRequestBody(createBooking);
//const json = JSON.Stringify(body) //It throws 415 error
return this.httpClient.post(this.baseUrl + 'Save', body )
.subscribe();
}
private getSaveBookingRequestBody(createBooking: CreateBooking): any {
const body = {
'Booking': {
'Header': this.getBookingHeader(createBooking), //It works fine.
'Items': [this.getBookingItems(createBooking)],
},
'TestOnly': !environment.production,
};
this.Logger.log(body);
return body;
}
private getBookingItems(createBooking: CreateBooking): any {
const bookingItem = {
'CountryOfOrigin': createBooking.booking.countryoforigin,
'VehicleValue': createBooking.booking.valueofvechicle,
'SerialNumber': createBooking.booking.bookingNumber,
'Description': createBooking.booking.description,
'Mobility': createBooking.booking.mobility,
'Currency': createBooking.booking.currency,
'Weight': createBooking.booking.weight,
'Year': createBooking.booking.year,
'Cbm': createBooking.booking.cbm,
//This is an array it doesn't work.
'SubUnits':[
createBooking.booking.relatedVehicles.forEach(element => {
const units = {
'RelationType': element.relation,
'Weight': element.weight,
'Year': element.year,
};
})],
};
return bookingItem;
When i create POST body the SubUnits always empty in WEB API.
How to loop through array and create an object for sending as body.
My angular model and WEB-API object are different
I have also tried the JSON.Stringify(unitsArray) and returning it to SubUnits
const unitsArray = [];
createBooking.booking.relatedVehicles.forEach(element => {
const units = {
'RelationType': element.relation,
'SerialNumber': element.chassisno,
'Weight': element.weight,
'Year': element.year,
};
unitsArray.push(units);
});
SubUnits : JSON.stringify(unitsArray); // It also doesn't work with API.
Version :
Angular 5
Typescript 2.4.2

Answer 1

const bookingItem = {
...
'SubUnits': [
createBooking.booking.relatedVehicles.forEach(element => {
const units = {
'RelationType': element.relation,
'Weight': element.weight,
'Year': element.year,
};
})
]
...
};
This loop doesnt fill the array in bookingItem.SubUnits. Array.forEach does not return a value. Besides that, the variable units is never used. What you can do instead is create a new array using Array.map.
'SubUnits': [
createBooking.booking.relatedVehicles.map(element => ({
'RelationType': element.relation,
'Weight': element.weight,
'Year': element.year
}))
]
This makes an array with 1 array element from createBooking.booking.relatedVechiles. I am not sure if that's what you are going for, but it is in your OP.

Answer 2

Have you tried to not use JSON.stringify? Just use:
SubUnits :unitsArray;