I want to send a student data to the backend server via axios.post, but im not getting the full object in my server route
Here’s the ‘student’ object:
{
"sisn": "202401",
"level": "K1",
"registration_date": "2024-11-01T05:56:27.705Z",
"custodian": "Mother",
"personal": {
"firstname": "Jack",
"middlename": "Sparrow",
"lastname": "James",
"lrn": "333333331111",
"gender": "Male",
"email": "[email protected]",
"birthdate": "2020-11-01",
"height": "4'8"",
"blood_type": "B",
"food_allergen": "None",
"cell": "0915-881-5474",
"weight": "43",
"fortitude": "Normal",
"siblings": 1,
"photo_filename": "daniella.jpg",
"photo": {}
},
"parents": {
"mother": {
"firstname": "Sssss",
"middlename": "Sdfsdfsd",
"lastname": "Assss",
"address_line1": "Lot 1, Blk 2 Guyabano St., Brgy 178",
"address_line2": "Camarin Caloocan City",
"email": "[email protected]",
"occupation": "housewife",
"cell": "0945-555-5555",
"marital_status": "Married",
"photo_filename": "daniella.jpg",
"photo": {}
}
}
}
The ‘save’ button in my app that has an OnClick handler
const AddStudent = async (e) => {
await axios.post('http://localhost:4000/api/students/add', student,
{ headers: { "Content-Type": "multipart/form-data",}
}).then(result => {
SetIsStudentCreationShown(false)
SetIsStudentSummaryShown(true)
}).catch(error => {
console.log('something went wrong')
})
}
The route handler (some i deleted intentionally, im using multer )
router.post('/add', (req,res,next) => {
upload(req, res, async (err) => {
console.log(req.body)
more code...
}
}
the console.log(req.body) shows some but now all the data in my object
[Object: null prototype] {
sisn: '202401',
level: 'K1',
registration_date: '2024-11-01T05:18:53.625Z',
custodian: 'Mother',
personal: [Object: null prototype] {
firstname: 'Rowel',
middlename: 'Gomez',
lastname: 'Sss',
lrn: '333333331111',
gender: 'Male',
email: '[email protected]',
birthdate: '2020-11-01',
height: `4'8"`,
blood_type: 'B',
food_allergen: 'None',
cell: '0915-881-5474',
weight: '43',
fortitude: 'Normal',
siblings: '1',
photo_filename: 'daniella.jpg'
}
}
For some reason there is no parent field in the object. The weird thing is if I change the entry order of the field, parents first and then personal, the personal field in the object is nowhere to be found.
I need to have access to the whole student object inside my student route.
What should I do.
Here’s the Onchange handler of my form that set the student State:
const HandleChangeFormInputs =(e) => {
e.stopPropagation();
let inputName = e.target.name;
if (inputName.search('student')!==-1) {
if (inputName.search('height')!==-1) { //5'9" or 5'10"
var heightState, height;
//allows empty value
if (!e.target.value) heightState = e.target.value;
//removes all the formating
height = e.target.value.replace(/[^d]/g,'');
//allows values that has only feet number, no inches
if (height.length === 1) heightState = height;
//accepts feet number and single digit inches
if (height.length === 2) heightState = `${height.slice(0,1)}'${height.slice(1,2)}"`;
if (height.length === 3) heightState = `${height.slice(0,1)}'${height.slice(1,3)}"`;
SetStudent({...student,personal:{...student.personal,height:heightState}});
}
// works for all input with mobile numbers 0915 881-5767
else if (inputName.search('cell') !==-1) {
let unmaskednumber, maskednumber;
//not really masked, since value is empty, only just for the code below
if (!e.target.value) maskednumber = e.target.value;
else {
//removes all the formating
unmaskednumber = e.target.value.replace(/[^d]/g,'');
if (unmaskednumber.length <5) maskednumber = `${unmaskednumber.slice(0,e.target.value.length)}`;
else if (unmaskednumber.length < 8) maskednumber = `${unmaskednumber.slice(0,4)}-${unmaskednumber.slice(4,7)}`;
else if (unmaskednumber.length < 12) maskednumber = `${unmaskednumber.slice(0,4)}-${unmaskednumber.slice(4,7)}-${unmaskednumber.slice(7,11)}`;
}
SetStudent({...student,personal:{...student.personal,cell:maskednumber}});
}
else {
var name = inputName.slice(8);
SetStudent({...student,personal:{...student.personal,[name]:e.target.value}});
}
}
else if (inputName.search('mother')!==-1) {
if (inputName.search('cell') !==-1) {
let unmaskednumber, maskednumber;
//not really masked, since value is empty, only just for the code below
if (!e.target.value) maskednumber = e.target.value;
else {
unmaskednumber = e.target.value.replace(/[^d]/g,''); //removes all the formating
if (unmaskednumber.length <5) maskednumber = `${unmaskednumber.slice(0,e.target.value.length)}`;
else if (unmaskednumber.length < 8) maskednumber = `${unmaskednumber.slice(0,4)}-${unmaskednumber.slice(4,7)}`;
else if (unmaskednumber.length < 12) maskednumber = `${unmaskednumber.slice(0,4)}-${unmaskednumber.slice(4,7)}-${unmaskednumber.slice(7,11)}`;
}
SetStudent({...student,parents:{...student.parents,mother:{...student.parents.mother,cell:maskednumber}}});
}
else {
var name = inputName.slice(7);
SetStudent({...student,parents:{...student.parents,mother:{...student.parents.mother,[name]:e.target.value}}});
}
}
else if (inputName.search('father')!==-1) {
}
else {
SetStudent({...student,[inputName]:e.target.value});
}
} //end of HandleChangeFormInputs
