Updated April 10, 2023
Introduction to jQuery object to JSON
The jQuery object to JSON conversion done with the JSON.stringify() function. The jQuery JSON.stringify() is used to convert the JavaScript value into a JSON string. The jQuery JSON.stringify() function is a built-in function in jQuery. The JSON is commonly used to send or receive the data to or from the web server or over the internet, so if we need to send the JavaScript objects or values to the web server, then first it needs to convert into the JSON string and then sends. The jQuery JSON.stringify() function replaces values if the function to replace is provided or adds only the specified properties if the replacer array is provided.
Syntax of jQuery JSON.stringify() Function
Given below is the syntax mentioned:
JSON.stringify( value [, replacer [, space]] );Parameters:
- value: This is not an optional parameter. It specifies the value which is to convert to the JSON string.
- replacer: This is an optional parameter. It specifies the function that changes the behavior of the stringification process.
- space: This is an optional parameter. It specifies the white space insert into the output JSON string for readability. It can be a number or string value.
Return Value:
The return value of this function is the JON string which represents the conversion of the specified object.
Working of jQuery object to JSON Conversion
- The jQuery object to JSON conversion performs with the help of the JSON.stringify() function, which accepts three parameters.
- Suppose we have an array of numbers as “no [ ‘One’, ‘Two’, ‘Three’, ‘Four’ ];”, next we need to convert the array object to the JSON string.
- So we can use the JSON.stringify() function as “JSON.stringify(no);”, which will return a JSON string [“One”,”Two”,”Three”,”Four”] as output.
Examples of jQuery object to JSON
Given below are the examples of jQuery object to JSON:
Example #1
Example of jQuery object to JSON conversion to convert array object to JSON string with JSON.stringify() function.
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<script src = "https://code.jquery.com/jquery-3.5.0.js"></script>
<title > This is an example for jQuery object to JSON conversion </title>
<style>
#p1 {
color : blue;
}
#p2 {
color : red;
}
</style>
</head>
<body>
<h3> This is an Example for object to JSON conversion : </h3>
<p id = "p1"> </p>
<button onclick = "checkRes()" > Click here to convert object to JSON string. </button>
<p id = "p2"> </p>
<script>
var Student = [ "Smith", "Frank", "Reily", "Patel", "John" ];
$( "#p1" ).text( "The list of Students are : " + Student );
function checkRes()
{
var res = JSON.stringify( Student );
$( "#p2" ).text("The list of Students convert to JSON string is : " + res);
}
</script>
</body>
</html>Output:
Once we click on the list of elements, the respective outputs are:
In the above code the array is created which contain names of the students. Next the JSON.stringify() function is used to convert the student array to JSON string format as “JSON.stringify( Student );”, the function return the JSON string format, as we can see in the above output.
Example #2
Example of jQuery object to JSON conversion to convert object to JSON string with JSON.stringify() function with replacer function.
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<script src = "https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery object to JSON conversion </title>
<style>
#p1 {
color : blue;
}
#p2 {
color : red;
background-color : yellow;
}
</style>
</head>
<body>
<h3> This is an Example for object to JSON conversion : </h3>
<p id = "p1"> </p>
<button onclick = "checkRes()" > Click here to convert object to JSON string. </button>
<p id = "p2"> </p>
<script>
var obj = { Sub1: "JavaScript", Sub2: "CSS", Sub3: 4, Sub4: "Java" };
// replace value if it is number
function replacer(key, value) {
// Filtering out properties
if (typeof value === 'number') {
return "Not defined properly";
}
return value;
}
function checkRes()
{
$( "#p1" ).text("The object before JSON.stringify() function with replacer used is : " + JSON.stringify(obj));
$( "#p2" ).text( "The object after JSON.stringify() function with replacer used is : " + JSON.stringify( obj, replacer ));
}
</script>
</body>
</html>Output:
Once we click on the button, the output is:
In the above code, the object is created which contains the name of the subjects. Next the JSON.stringify() function is used with the replacer function. The function converts the obj object to JSON string format and replaces the subject value by the “Not defined properly” if it is number as “JSON.stringify( obj, replacer );”, where replacer is the name of the function and the return output of the function we can see in the above output.
Example #3
Example of jQuery object to JSON conversion to convert object to JSON string with JSON.stringify() function with space parameter.
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<script src = "https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery object to JSON conversion </title>
<style>
#p1 {
color : blue;
}
#p2 {
color : red;
background-color : yellow;
}
</style>
</head>
<body>
<h3> This is an Example for object to JSON conversion : </h3>
<p id = "p1"> </p>
<button onclick = "checkRes()" > Click here to convert object to JSON string. </button>
<p id = "p2"> </p>
<script>
var obj = [{ sub: 3, Name: "JavaScript" },
{ sub: 2, Name: "CSS" },
{ sub: 4, Name: 4 },
{ sub: 1, Name: "Java" } ];
function checkRes()
{
alert("The object before JSON.stringify() function with replacer used is : " + JSON.stringify(obj) + "\nThe object after JSON.stringify() function with replacer used is : " + JSON.stringify( obj, null, ';' ));
}
</script>
</body>
</html>Output:
In the above code, the object is created which contains key-value pair. Next the JSON.stringify() function is used with the space parameter. The function converts the obj object to JSON string format and inserts space by “;” character(separator) as “JSON.stringify( obj, null, ‘;’ );”, where replacer function is null and the return output of the function we can see in the above output.
Conclusion
The jQuery JSON.stringify() function is a built-in function, which is used to convert the JavaScript value into a JSON string.
Recommended Articles
This is a guide to jQuery object to JSON. Here we discuss the introduction, working of jQuery object to JSON conversion and examples. You may also have a look at the following articles to learn more –
