Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to serialize a JavaScript array?
In this tutorial, we are going to learn to serialize JavaScript arrays. The serializeArray() method serializes all forms and forms elements like the .serialize() method but returns a JSON data structure for you to work with.
A JavaScript array of objects may be created using the built-in jQuery function serializeArray() that is ready to be encoded as a JSON string. It utilizes a set of forms and/or form controls from jQuery. There are several sorts of controls. Any JavaScript object may be converted into JSON using a JSON string, which can then be sent to the server.
Syntax
Now let’s move to see the syntax to serialize JavaScript arrays −
$(selector).serializeArray()
In the above syntax, we can see we have to give a selector, and then we will use the ‘serializeArray()’ method to get the data from the given ‘selector’ and it will return a string that will contain all the data.
Algorithm
We have seen the syntax above to learn to serialize JavaScript arrays, now we are going to see the complete approach step by step −
First, we have to create a form using the <form> tag to get the user input and we will define an id for the form to identify it.
In the form tag, we will create some input fields using the <input> tag to get the input from the user.
We will define a button to submit all the data to the script, or by clicking the button the functions in the script will be invoked and will collect this data.
In the script, first, we have to add the JQuery in the code and for that, we can add an external source to our code.
We will get the data from the form using its id and the click event, then can use that data to print in the document, backend, etc.
Returned data will be in the form of a string, so it is easy to use that data and can apply some functions to it.
We have seen the syntax and algorithm to learn to serialize JavaScript arrays, now let’s take an example to implement the above-discussed steps.
Example
In this example, we will create a form that will take some user inputs and by using the serialize.Array() method we are going to get the data from the form and print it in the document.
<html> <head> <title>The jQuery Example</title> <script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script> <script type = "text/javascript" language = "javascript"> $(document).ready(function() { $("#driver").click(function(event){ $.post( "/jquery/serialize.php", $("#testform").serializeArray(), function(data) { $('#stage1').html(data); } ); var fields = $("#testform").serializeArray(); $("#stage2").empty(); jQuery.each(fields, function(i, field){ $("#stage2").append(field.value + " "); }); }); }); </script> </head> <body> <p>Click on the button to load result.html file −</p> <div id = "stage1" style = "background-color:blue;">STAGE - 1</div> <br/> <div id = "stage2" style = "background-color:blue;">STAGE - 2</div> <form id = "testform"> <table> <tr> <td><p>Name −</p></td> <td><input type = "text" name = "name" size = "40" /></td> </tr> <tr> <td><p>Age −</p></td> <td><input type = "text" name = "age" size = "40" /></td> </tr> <tr> <td><p>Sex −</p></td> <td> <select name = "sex"> <option value = "Male" selected>Male</option> <option value = "Female" selected>Female</option> </select></td> </tr> <tr> <td colspan = "2"> <input type = "button" id = "driver" value = "Load Data" /> </td> </tr> </table> </form> </body> </html>
In the body of the code, first, we have defined a paragraph, then defined two div’s with the id ‘stage1’ and ‘stage2’ with the background color blue and will contain the data their name initially.
After that, we defined the form with the id ‘testform’ and defined some input fields in it to collect some data from the user and all the input fields are designed in the table form. We defined an input button with an id ‘driver’.
In the script, first, we have included the JQuery in the code using the external source as ‘serializeArray()’ is the method of the JQuery. Then in the script, we collected the data from the form using its id and serializeArray() method and printed that in two forms, the first can be seen in the first div element, and the second can be seen in the second div element.
Conclusion
In this tutorial, we learned how to serialize JavaScript arrays. The serializeArray() method serializes all forms and forms elements like the serialize() method but returns a JSON data structure for you to work with.
A JavaScript array of objects may be created using the built-in jQuery function serializeArray() that is ready to be encoded as a JSON string. It utilizes a set of forms and/or form controls from jQuery. There are several sorts of controls. Any JavaScript object may be converted into JSON using a JSON string, which can then be sent to the server.
2K+ Views
