Updated April 4, 2023
Introduction to jQuery json stringify
The jQuery JSON stringify() method is used to convert and return the jQuery object into a string. The jQuery JSON stringify() method is a built-in method in jQuery. Sometimes while we are developing an application, it is required to serialize the object or data to a string to store the data or for transferring the data to a web server or any API. JSON is a lightweight string-based open standard for human-readable data exchange, so the use the JSON stringify() method to convert an object to the string.
Syntax
The syntax of the JQuery JSON stringify() method –
JSON.stringify(value, replacer, space);Parameters
- value – This is not an optional parameter that specifies the value or object which is to be converted into the JSON string.
- replacer – This is an optional parameter that specifies the array or the altering function uses as a selected filter for the stringify. If the value is not passed or empty or null value, then all of the properties will be included in the converted string.
- space – This is an optional parameter that specifies the space controlling in the converted string. The possible values of the space can be number or string, if it is a number, then it represents the number of spaces intended for the converted string, and the string represents the string used for the indentation; the string can be of up to 10 characters.
- Return value – The return value of this method is a string which is the conversion of an object.
Working of the JQuery JSON stringify() method
The JSON stringify() method accepts a three-parameter, the first parameter is an object which is to be serialized or convert to string, the second parameter is a function to run, and the third parameter is a replacer to indent. Suppose an array we passed to the JSON.stringify() method, then JSON.stringify() method serialized the array or convert array to string representation, this string representation of an array we can easily send over the webserver.
Examples of jQuery JSON stringify() method
Here are the following examples mention below
Example #1 – Method to Sterilized an Array
Next, we write the html code to understand the jQuery JSON.stringify() method more clearly with the following example, where the JSON.stringify() method is used to convert an array to string representation, as below –
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title> This is an example for jQuery JSON stringify() method </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
</head>
<script type="text/javascript">
$(document).ready(function () {
$("#id1").click(function() {
var fruits = [ "Apple", "Banana", "Orange", "Mango", "Cherry" ];
$("h3").text(fruits );
});
$("#id2").click(function() {
var fruits = [ "Apple", "Banana", "Orange", "Mango", "Cherry" ];
var jfruits = JSON.stringify(fruits);
$("h2").text(jfruits );
});
});
</script>
</head>
<body>
<h1> Example for the jQuery JSON stringify() method. </h1>
<p>Click below button to show object : </p>
<button id = "id1" > Get Object </button>
<h3> </h3>
<p>Click below button to show conversion string of an object : </p>
<button id = "id2" > Get JON String of an Object </button>
<h2> </h2>
</body>
</html>An output of the above code is –
Once we click on the “Get Object ” Button, and output is –
And once we click on the “Get JON String of an Object” Button, and output is –
As in the above program, the array of fruits is created, which gets print by clicking the first button through calling the function. Next, if we click the second button, it calls to the function; in this function, it is converting the same array to string, as we can see in the output. The above array is printing only elements without quotes, whereas the below array is printed with braces (because braces are also part of the string now) and elements with double-quotes.
Example #2 – Method to Sterilized an Object with Function
Next, we write the html code to understand the jQuery JSON.stringify() method, where the JSON.stringify() method is used to convert an object to string representation by applying the function, as below –
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title> This is an example for jQuery JSON stringify() method </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
</head>
<script type="text/javascript">
$(document).ready(function () {
$("#id2").click(function() {
var sub = { "Subject1" : "English", "Subject2" : "Hindi", "Subject3" : "Maths"};
var jsub = JSON.stringify(sub, function (key, value) {
if ( key ) {
return value.toUpperCase();
} else {
return value;
}
});
$("h2").text( jsub );
});
});
</script>
</head>
<body>
<h3> Example for the jQuery JSON stringify() method with function. </h3>
<p>Click below button to show conversion string of an object : </p>
<button id = "id2" > Get JON String of an Object with function conversion</button>
<h2 style = "background-color:red;"> </h2>
</body>
</html>An output of the above code is –
Once we click on the “Get JON String of an Object with function conversion” button, the output is –
As in the above program, if we click the button, it calls to the function; in this function, it is converting the object to a string by using JSON.stringify() method with a function that is converting all the values to uppercase and printing, as we can see in the output.
Example #3 – Method to Sterilized the Date Object with Replacer
Next, we write the html code to understand the jQuery JSON.stringify() method, where the JSON.stringify() method is used to convert date object to string representation with some string replacement, as below –
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title> This is an example for jQuery JSON stringify() method </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
</head>
<script type="text/javascript">
$(document).ready(function () {
$("#id1").click(function() {
var jsub = JSON.stringify( { "Date" : new Date( 2020, 11, 2, 15, 4, 5) }, null, "This is space");
$("h2").text( jsub );
});
$("#id2").click(function() {
var jsub = JSON.stringify( { "Date" : new Date( 2020, 11, 2, 15, 4, 5) }, null, 10);
$("h2").text( jsub );
});
});
</script>
</head>
<body>
<h3> Example for the jQuery JSON stringify() method with space. </h3>
<p>Click below button to show conversion string of an object : </p>
<button id = "id1" > Get JON String of an Object with indent string</button>
<button id = "id2" > Get JON String of an Object with indent number</button>
<h2 style = "background-color:red;"> </h2>
</body>
</html>An output of the above code is –
Once we click on the “Get JON String of an Object with indent string” button, the output is –
And if we click on the “Get JON String of an Object with indent number” button, the output is –
As in the above program, if we click the first button, it calls to the function; in this function, it is converting the date object to a string with indenting by the string “ This is space”, as we know upto 10 characters only indent so only indenting by “ This is sp”. And second is converting the date object to a string with 10 spaces indented to the string.
Conclusion
The jQuery JSON stringify() method is a built-in method in jQuery used to convert and return the jQuery object to the string.
Recommended Articles
This is a guide to jQuery json stringify. Here we discuss the Working of the JQuery JSON stringify() method and Examples along with the codes and outputs. You may also have a look at the following articles to learn more –
