Get data as object after form submit in jQuery

I am building a website that can send custom data after submission with the below code.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$('form').submit((e)=>{
e.preventDefault();
let data = $('form').serializeArray();
console.log(data);
$.ajax({
url: 'path/to/submit',
type: 'POST',
data: data,
success: (res) => {
console.log(res);
}
})
});

<!-- language: lang-css -->

form {
border: 1px solid black;
}

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
Name
<input type="text" name="name" value="Andi" /><br />
Password
<input type="password" name="password" value="pass" /><br />
Role <br/ >
<input type="radio" name="role" value="teacher" checked /> Teacher <br />
<input type="radio" name="role" value="student" /> Student <br />
Hobby <br/ >
<input type="checkbox" name="hobby" value="Sport" checked /> Sport <br />
<input type="checkbox" name="hobby" value="Music" /> Music <br />
Description
<textarea name="description">I like programming</textarea><br />
City
<select name="city">
<option value="Jakarta">Jakarta</option>
<option value="Bali">Bali</option>
</select><br />
<input type="submit" />
</form>

<!-- end snippet -->

So, to get the data after submission, I use .serializeArray() method with returning an array of object data. But the output does not identical to my expectation:

{
  "name": "Andi",
  "password": "pass",
  "role": "teacher",
  "hobby": ["Sport"],
  "description": "I like programming",
  "city": "Jakarta"
}

Is there a simple way to get data as JSON Object after submission like the example above?

Not really sure if this is what you really want but you can try this

$('form').submit((e)=>{
  e.preventDefault();

	const data = Object.fromEntries([...new FormData(this)]);

	console.log(data);

});

You can use the native FormData object. You need to loop through all the keys now that you have more values (radio buttons) with the same name. So, if there are more values with the same name/key you get the value as an array (with getAll()) otherwise you get the plain text value.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$('form').submit((e) => {
e.preventDefault();
let formdata = new FormData(e.target);
let data = {};
[...formdata.keys()].forEach(key => {
let values = formdata.getAll(key);
data[key] = (values.length > 1) ? values : values.join();
});
console.log(data);
$.ajax({
url: 'path/to/submit',
type: 'POST',
data: data,
success: (res) => {
console.log(res);
}
})
});

<!-- language: lang-css -->

form {
border: 1px solid black;
}

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
Name
<input type="text" name="name" value="Andi" /><br /> Password
<input type="password" name="password" value="pass" /><br /> Role <br/>
<input type="radio" name="role" value="teacher" checked /> Teacher <br />
<input type="radio" name="role" value="student" /> Student <br /> Hobby <br/>
<input type="checkbox" name="hobby" value="Sport" checked /> Sport <br />
<input type="checkbox" name="hobby" value="Music" /> Music <br /> Description
<textarea name="description">I like programming</textarea><br /> City
<select name="city">
<option value="Jakarta">Jakarta</option>
<option value="Bali">Bali</option>
</select><br />
<input type="submit" />
</form>

<!-- end snippet -->