Updated March 31, 2023
Introduction to jQuery serializeArray
The jQuery serializeArray() is a predefined function. This serializeArray() function is used to create an array of objects, these objects are ready to encoded into JSON. This serializeArray() is applied on collection or list of forms. In general, JSON consisting of key and value pairs. The return type of JSON format is a string. The converted JSON object later sends it to the server.
Real Time Example: If client requirement is collection data into JSON then we can use serializeArray() function.
How does serializeArray() Function work in jQuery?
jQuery is working on a list or collection or array values for converting them into JSON by applying serializeArray() function.
Syntax #1
$(document).ready(function() {
$(selector).serializeArray();
//some code
}Explanation: serializeArray() is not accepting any arguments to the function. serializeArray() function returns string of objects in JSON format.
Syntax #2 – JSON format
object=[
{"key:"value"},
{"key:"value"},
{"key:"value"},
.
.
.
.
]Syntax #3
Make it function the jQuery application, we must include below script inside the html page
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>Examples to Implement serializeArray
Below are the examples to implement for the same:
Example #1
JSON data with applying serializeArray() function on fields.
Code:
<!DOCTYPE html>
<html>
<head>
<title>SerializeArray</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
.fields {
border: 3px solid brown;
margin-bottom: 10px;
width: 300px;
height: 100px;
padding: 20px;
background:pink;
}
.button
{
text-align: center;
}
button
{
color:red;
background: blue;
}
.JsonData
{
color:green;
font-size:30px;
border: 3px solid brown;
margin-bottom: 10px;
}
label,input
{
color:red;
}
h1
{
color:green;
text-align:center;
}
p
{
color:blue;
font-size:28px;
border: 3px solid brown;
}
</style>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- jQuery code to show the working of this method -->
<script>
$(document).ready(function() { //The ready() method event occurred when the document object model has loaded
$("button").click(function() { //The click() function responded when we click on Get JSON Data button
var serial = $("form").serializeArray(); //It serializes form data
$.each(serial, function(value, names) { //iterating values
$("#displayArea").append(names.name + ":" + names.value+"<br>"); //appending fields data to the specific area
});
});
});
</script>
</head>
<body>
<h1>Fields data into JSON object by applying SerializeArray function</h1>
<p>The jQuery serializeArray() is a predefined function. This serializeArray() function is used to create an array of objects, this objects are ready to encoded into JSON format. This serializeArray() is applied on collection or list of forms. In general JSON consisting of key and value pair. The return type of JSON format is string. The converted JSON object later send it to the server.</p>
<div class="fields">
<form action="#">
<label>Your Name::</label>
<input type="text" name="Name" value="Amardeep">
<br>
<br><label> Your Age:: </label>
<input type="text" name="Age" value="27">
<br>
</form>
<div class="button">
<button>Get JSON Data</button>
</div>
</div>
<div class="JsonData" id="displayArea"></div>
</body>
</html>Output:
Example #2
JSON data with applying serializeArray() function on select option.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<title>SerializeArray</title>
<style>
body, select {
font-size: 16px;
}
form {
margin: 10px;
}
p {
color: green;
margin: 5px;
border:solid 5px brown;
font-size: 28px;
}
b {
color: red;
}
h1
{
text-align: center;
color:red;
}
</style>
</head>
<body>
<h1>Select options data into JSON object by applying SerializeArray function</h1>
<p>The jQuery serializeArray() is a predefined function. This serializeArray() function is used to create an array of objects, this objects are ready to encoded into JSON format. This serializeArray() is applied on collection or list of forms. In general JSON consisting of key and value pair. The return type of JSON format is string. The converted JSON object later send it to the server.</p>
<form>
<!--multiple selected values from form-->
<select name="multiple" multiple="multiple">
<option selected="selected">EDUCBA</option>
<option>Java Course</option>
<option selected="selected">Python Course</option>
<option>C Course</option>
<option >C# Course</option>
</select>
<br>
<!--single selected values from form-->
<select name="single">
<option>Course Fee</option>
<option>Hot Courses</option>
<option>Faculty</option>
<option>Login</option>
</select>
</form>
<p><b>Multiple Selected Values:</b> <span id="multipleValues"></span></p>
<script>
function getMyData() {//function for display values
var fields = $( ":input" ).serializeArray();//It serializes form data
jQuery.each( fields, function( value, names ) {//iterating values
$( "#multipleValues").append(names.value+ ", " );//appending fields data to the specific area
});
}
$( "select").change(getMyData);//displayy values if value chnages
getMyData();
</script>
</body>
</html>Output:
Example #3
JSON data with applying serializeArray() function on fields and show on the alert box.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<title>SerializeArray</title>
<style>
form {
margin: 10px;
}
p {
color: maroon;
margin: 5px;
border:solid 2px red;
font-size: 28px;
}
h1
{
text-align: center;
color:blue;
}
label, input
{
color: navy;
font-size: 22px;
border: solid 2px green;
}
.inputData
{
border: solid 2px red;
}
</style>
</head>
<body>
<h1>Input Fields data into JSON object by applying SerializeArray function and display on Alert box</h1>
<p>The jQuery serializeArray() is a predefined function. This serializeArray() function is used to create an array of objects, this objects are ready to encoded into JSON format. This serializeArray() is applied on collection or list of forms. In general JSON consisting of key and value pair. The return type of JSON format is string. The converted JSON object later send it to the server.</p>
<form>
<form>
<div class="inputData">
<label>Email::</label> <input type="text" name="email" value="[email protected]"/><br><br>
<label>Mobile Number::</label><input type="text" name="mobile" value="9999999999"/><br><br>
<label>DOB::</label><input type="text" name="dob" value="30-Mar-1995"/><br><br>
<label>Employee ID::</label><input type="text" name="employee" value="2452"/><br><br>
<label>Designation::</label><input type="text" name="design" value="Java Developer"/><br><br>
<label>Company::</label><input type="text" name="company" value="EDUCBA"/>
</form>
</form>
</div>
<script>
var output = { };
$.each($('form').serializeArray(), function() {
output[this.name] = this.value;
});
alert("[{"+'Email : ' + output.email + ', Mobile Number : ' + output.mobile+', Employee ID:'+output.employee+', Designation: '+output.design+', Company: '+output.company+"}]");
</script>
</body>
</html>Output:
Conclusion
This function is used to convert the list or array data into JSON format. We can also convert input fields, select options, text area fields data into JSON format by applying serializeArray() function.
Recommended Articles
This is a guide to jQuery serializeArray. Here we discuss applying serializeArray() function, examples to implement jQuery serializeArray with proper sample codes. You can also go through our other related articles to learn more –
