How to send object with an object inside to server Vue.js 3 - spring

Question

I need to send object to the server:
{
"id": "null",
"indexNumber": "1454",
"indexYear": "2021",
"firstName": "John",
"lastName": "Doe",
"email": "john#doe.com",
"address": "John Doe Street 1231",
"city": {
"postalCode": 10000,
"name": "New York"
} ,
"currentYearOfStudy": 1
}
when I use to test it from postman everything is fine, but when I try to send object "student" from frontend i got this error message "Cannot read property 'postalCode' of undefined:
Where do I need to define this property, or where to define object city, how to do this?
inserStudent() {
StudentService.insertStudent({
indexNumber: this.indexNumber,
indexYear: this.indexYear,
firstName: this.firstName,
lastName: this.lastName,
email: this.email,
address: this.address,
postalCode: this.city.postalCode,
name: this.city.name,
currentYearOfStudy: this.currentYearOfStudy
})
.then((response) => {
console.log("Student inserted!" + response);
addMessage({
message: "Student inserted!",
type: "success",
title: "STUDENT",
});
})
.catch((error) => {
addMessage({
message: "Insert was not successful:" + error,
type: "danger",
title: "Insert student",
});
});
}
Sorry I'm new to vue...
<template>
<div class="form-container m-4 col-6 col-md-8 col-sm-10 mx-auto" display-inline-block>
<h3 v-if="actionType === 'new'">New Student</h3>
<h3 v-else>Edit Student</h3>
<MyInputComponent
name="indexNumber"
label="Index Number"
v-model="indexNumber"
:vcomp="v$.indexNumber"
></MyInputComponent>
<MyInputComponent
name="indexYear"
label="Index Year"
v-model="indexYear"
:vcomp="v$.indexYear" >
</MyInputComponent>
<MyInputComponent
name="firstName"
label="First Name"
v-model="firstName"
:vcomp="v$.firstName"
>
</MyInputComponent>
<MyInputComponent
name="lastName"
label="Last Name"
v-model="lastName"
:vcomp="v$.lastName"
>
</MyInputComponent>
<MyInputComponent
name="email"
label="Email"
v-model="email"
:vcomp="v$.email"
>
</MyInputComponent>
<MyInputComponent
name="address"
label="Address"
v-model="address"
:vcomp="v$.address"
>
</MyInputComponent>
<MyInputComponent
name="postalCode"
label="Postal Code"
v-model="postalCode"
:vcomp="v$.postalCode"
>
</MyInputComponent>
<MyInputComponent
name="name"
label="City Name"
v-model="name"
:vcomp="v$.name"
>
</MyInputComponent>
<MyInputComponent
name="currentYearOfStudy"
label="Curent Year Of Study"
v-model="currentYearOfStudy"
:vcomp="v$.currentYearOfStudy"
>
</MyInputComponent>
<div class="d-flex flex-row-reverse">
<button class="btn btn-outline-primary" #click="saveStudent">Save</button>
</div>
</div>
</template>
<script>
import useValidate from "#vuelidate/core";
import {
required,
minLength,
maxLength,
email,
maxValue,
minValue,
} from "#vuelidate/validators";
import MyInputComponent from "#/components/inputs/MyInputControl.vue";
import StudentService from "#/services/StudentService.js";
import { addMessage } from "#/main.js";
export default {
components: { MyInputComponent },
props: {
studentId: {
type: String,
},
actionType: {
type: String,
},
},
created() {
if (this.studentId) {
StudentService.getStudent(this.studentId).then((response) => {
const student = response.data;
this.indexNumber = student.indexNumber;
this.indexYear = student.indexYear;
this.firstName = student.firstName;
this.lastName = student.lastName;
this.email = student.email;
this.address = student.address;
this.postalCode = student.city.postalCode;
this.name = student.city.name;
this.currentYearOfStudy = student.currentYearOfStudy;
});
}
},
data() {
return {
v$: useValidate(),
id:null,
indexNumber: "",
indexYear: "",
firstName: "",
lastName: "",
email: "",
address: "",
postalCode: "",
name: "",
currentYearOfStudy: null,
randomNumber:''
};
},
validations() {
return {
indexNumber: {
required,
minLength: minLength(4),
maxLength: maxLength(4),
},
indexYear: {
required,
minLength: minLength(4),
maxLength: maxLength(4),
},
firstName: {
required,
minLength: minLength(3),
maxLength: maxLength(30),
},
lastName: {
required,
minLength: minLength(3),
maxLength: maxLength(30),
},
email: {
required,
email,
},
address: {
required,
minLength: minLength(3),
},
postalCode:{
required,
minValue: minValue(9999),
maxValue: maxValue(100000),
},
name:{
required,
minLength: minLength(3),
maxLength: maxLength(30)
},
currentYearOfStudy: {
required,
minValue: minValue(1),
maxValue: maxValue(5),
},
};
},
methods: {
saveStudent() {
if (this.actionType && this.actionType === "new") {
this.inserStudent();
} else {
this.updateStudent();
}
},
inserStudent() {
StudentService.insertStudent({
indexNumber: this.indexNumber,
indexYear: this.indexYear,
firstName: this.firstName,
lastName: this.lastName,
email: this.email,
address: this.address,
postalCode: this.city.postalCode,
name: this.city.name,
currentYearOfStudy: this.currentYearOfStudy
})
.then((response) => {
console.log("Student inserted!" + response);
addMessage({
message: "Student inserted!",
type: "success",
title: "STUDENT",
});
})
.catch((error) => {
addMessage({
message: "Insert was not successful:" + error,
type: "danger",
title: "Insert student",
});
});
},
updateStudent() {
StudentService.editStudent({
id: this.studentId,
indexNumber: this.indexNumber,
indexYear: this.indexYear,
firstName: this.firstName,
lastName: this.lastName,
email: this.email,
address: this.address,
postalCode: this.city.postalCode,
name: this.city.name,
currentYearOfStudy: this.currentYearOfStudy,
})
.then((response) => {
console.log("Student inserted" + response);
addMessage({
message: "Student updated",
type: "success",
title: "STUDENT",
});
})
.catch((error) => {
addMessage({
message: "Update was not successful:" + error,
type: "danger",
title: "Update student",
});
});
},
},
};
</script>

Answer 1

You've postalCode and name are defined in data property without nesting them, so you could nest them to a city field when you want to send the request :
StudentService.insertStudent({
indexNumber: this.indexNumber,
indexYear: this.indexYear,
firstName: this.firstName,
lastName: this.lastName,
email: this.email,
address: this.address,
city:{
postalCode: this.postalCode,
name: this.name,
},
currentYearOfStudy: this.currentYearOfStudy
})