Updated April 18, 2023
Introduction to jQuery array to json
The jQuery array is defined as a library of Javascript that is indicated as a variable to store multiple values in a single variable that is declared such a variable is known as an array variable in a jquery array and is declared using array constructors, literal notations, an implicit declaration in Javascript and to convert such arrays in jQuery to JSON which the JavaScript provides various techniques and they are Object.assign(), JSON.stringify() and to create array in jquery we can do it using isArray() method also other than above methods given for declaring array. The jquery array is converted to JSON format which results in converting the given array or list of elements in jquery into JSON object format.
Syntax:
As there are two methods provided by Javascript in JQuery array conversion to JSON object format. We will see both the method syntax in the below section.
1. Object.assign() method
object.assign(target, sources);Parameters:
target: It is said to hold the destination target object from where the object values and properties need to be copied.
Source object: It is said to hold the place where to which object the values and properties have to be copied.
This method takes these parameters and puts the source object into the target object and then this method returns the target object with the properties and its values that were copied from this target object.
2. JSON.stringify() method
JSON.stringify(JQuery array)Parameters:
Jquery array: This parameter holds the Javascript object which in terms is an array and this array is in Jquery array passed as an argument to convert.
This method returns the string format of the Jquery array that is passed as an argument to this function.
There are optional two other parameters also that can be used one argument can be used to hold the value that needs to be replaced by specifying it in any item in the array and the second argument can be used for replacing white space between the items with string or number.
How to convert the Jquery Array into JSON format with examples?
In this article, to convert the array in Jquery to JSON format this can be data that needs to send or received from any web server. As Jquery is a library of JavaScript, the array in Jquery is similar to the array in JavaScript and therefore JavaScript provides different techniques to do such conversion to JSON format.
There are two different methods of converting the given JavaScript object that means Jquery array into JSON format. They are:
1. assign(target, sources)
This method is mainly used for copying the items which are considered as source objects to another object known as the target object. Therefore these source objects act as each item of the array and these source objects are pushed to the target object where these source objects are stored and then they are converted to JSON using the JSON method.
Example:
In the below example let us see how the items are assigned as source objects and then made items and stored in one target object which in turn makes the array format that means the target object consists of an array. Then to convert this array into JSON we need to use JSON.stringify() method also in this example.
<!DOCTYPE html>
<html>
<head>
<title>
Convert array to JSON.
</title>
</head>
<body style = "text-align:center;" id = "body">
<h1 style = "color:Cyan;" >
Array Conversion to JSON using Object.assign()
</h1>
<p id = "ARR_ELE_UP" style = "font-size: 20px; color:red; font-weight: bold">
</p>
<button onclick = "Func_Run()">
Click to convert to JSON
</button>
<p id = "ARR_ELE_DOWN" style = "color:blue;
font-size: 20px; font-weight: bold;">
</p>
<script>
var arr_ele_up = document.getElementById("ARR_ELE_UP");
var arr_ele_down = document.getElementById("ARR_ELE_DOWN");
var arr1 = [54, 94, 78, 39, 37, 40, 34];
arr_ele_up.innerHTML = "Given Array = [" +arr1+"]";;
function Func_Run(){
arr_ele_down.innerHTML =
"JSON Object = "+JSON.stringify(Object.assign({}, arr1));
}
</script>
</body>
</html>Output:
After clicking on the button the output is:
In the above program, we can see firstly, when we are writing any JQuery code it is written within the <script> tag in HTML code as JQuery is a library of JavaScript. In the above example first, we are declaring an array and storing it in variable “arr1” where we have specified an array of 7 elements in it, and to display the array given we are defining it as a paragraph tag with the id as “ARR_ELE_UP” that is the array that needs to be displayed before the conversion to JSON format. Then we are defining the second paragraph with id as “ARR_ELE_DOWN” to display the converted array which is in JSON format. So we are providing a button and defining an “on click” event for this button with function as converting the array into JSON format using JSON.stringify() method where we are passing this Object.assign() method and the array as parameters to it to convert.
2. stringify()
In this article, this method is mainly used whenever we want to convert the array or any JavaScript object to the JSON format we use this in the previous example also we saw the usage of this method. We will be passing an array that is considered a JavaScript object as an argument for converting it to JSON format data. So whenever any JQuery array is passed it is first converted to string format which is displayed as JSON data that needs to be sent to any server.
Example:
<!DOCTYPE html>
<html>
<head>
<title>
Convert array to JSON
</title>
</head>
<body style = "text-align:center;" id = "body">
<h1 style = "color:Cyan;" >
Array Conversion to JSON using JSON.stringify()
</h1>
<p id = "ARR_ELE_UP" style = "font-size: 16px; color:red; font-weight: bold" >
</p>
<button onclick = "Func_Run()">
Convert
</button>
<p id = "ARR_ELE_DOWN" style = "color:blue;
font-size: 20px; font-weight: bold;">
</p>
<script>
var arr_ele_up = document.getElementById("ARR_ELE_UP");
var arr_ele_down = document.getElementById("ARR_ELE_DOWN");
var arr1 = [98, 29, 94, 51, 58, 10, 90];
arr_ele_up.innerHTML = "Given Array = [" +arr1+"]";;
function Func_Run(){
arr_ele_down.innerHTML = "JSON_String = '"+JSON.stringify(arr1)+"'";
}
</script>
</body>
</html>Output:
After clicking on the button the output is:
In the above program, we can see it was similar to the first example but this JSON.stringify() method is used to convert the entire array as a single string so we can differentiate with the above method and this method is the first example that displays the values of the array with each value and property JSON format whereas in this example we saw it is just converting the given array to a JSON format string or data.
Conclusion
In this article, we conclude that the JQuery array is similar to that of JavaScript array as Jquery is a library of JavaScript and hence whenever the developers want to convert the array format in Jquery or JavaScript we can use any of these methods but it all depends on the developer to what kind of JSON data is needed to send to the server is it in value and property format or only string format.
Recommended Articles
This is a guide to jQuery array to json. Here we discuss How to convert the Jquery Array into JSON format with examples and outputs. You may also have a look at the following articles to learn more –
