How to Convert JS Object to JSON String in JQuery/Javascript?
Converting a JavaScript object to a JSON string means using the JSON.stringify() method to transform the object into a JSON-formatted string. This allows for efficient data storage, transmission, and debugging by representing complex data structures in a standardized text format.
To Convert JS Object to JSON String in JQuery/Javascript we can use the following approaches:
Table of Content
Method 1: Using JSON.stringify() Method
- The JSON.stringify() method in JavaScript allows us to take a JavaScript object or Array and create a JSON string out of it.
- Store the JSON object in the variable.
- Pass that variable in the JSON.stringify() as an argument.
- It will return the value which is to be converted into a JSON string.
Syntax:
JSON.stringify(value, replacer, space)Example: The below example explains how the JavaScript object is converted into a JSON string using the JSON.stringofy() method.
// Sample JS object
const geeks = {
name: "Shubham",
age: 21,
Intern: "Geeksoforgeeks",
Place: "Work from Home"
};
// Converting JS object to JSON string
const gfg = JSON.stringify(geeks);
console.log(gfg);
Output
{"name":"Shubham","age":21,"Intern":"Geeksoforgeeks","Place":"Work from Home"}
Method 2: Using Lodash _.prototype.toJSON() Method
The _.prototype.toJSON() method of Sequence in lodash is used to execute the chain sequence in order to solve the unwrapped value.
NOTE: To implement this method for converting the JS object in the JSON string you need to install the lodash module into your local system.
Syntax:
const _ = require('lodash');
const myObj = {};
const jsonString = _(myObj).toJSON();
Example: The belowe example illustrate how to use the _.prototype.toJSON() method to convert the JavaScript obeject into an array.
// Sample JS object
const _ = require('lodash');
const geeks = {
name: "Shubham",
age: 21,
Intern: "Geeksoforgeeks",
Place: "Work from Home"
};
let res = _(geeks).toJSON();
console.log(res);
Output:
{"name":"Shubham","age":21,"Intern":"Geeksoforgeeks","Place":"Work from Home"}Method 3: Using Object.entries() and Array.prototype.reduce()
This approach involves manually building the JSON string by iterating over the object’s entries and constructing the JSON format manually. It provides a deeper understanding of the serialization process and allows for custom handling of the conversion.
Example:
function manualStringify(obj) {
function stringifyValue(value) {
if (typeof value === 'string') {
return `"${value.replace(/"/g, '\\"')}"`; // Escape quotes
} else if (typeof value === 'number' || typeof value === 'boolean') {
return String(value);
} else if (value === null) {
return 'null';
} else if (Array.isArray(value)) {
return `[${value.map(stringifyValue).join(',')}]`;
} else if (typeof value === 'object') {
const entries = Object.entries(value)
.map(([key, val]) => `"${key}":${stringifyValue(val)}`)
.join(',');
return `{${entries}}`;
}
return 'undefined'; // Handle unknown types
}
return stringifyValue(obj);
}
const geeks = {
name: "Shubham",
age: 21,
Intern: "Geeksoforgeeks",
Place: "Work from Home"
};
const jsonString = manualStringify(geeks);
console.log(jsonString);
Output
{"name":"Shubham","age":21,"Intern":"Geeksoforgeeks","Place":"Work from Home"}
Method 4: Using jQuery
JavaScript object is converted into a string and displays the data of the converted string on the user screen.
Example: The below example will explain how to convert the JavaScript object into an JSON string using jQuery.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Using jQuery</title>
<script src=
"https://code.jquery.com/jquery-1.12.4.min.js">
</script>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
How to Convert JS Object to JSON String?
</h3>
<h4>
----JSON Object----
<br>
{name: "Shubham", age: 21,
Intern: "Geeksoforgeeks",
Place:"Work from Home"}
</h4>
<p id="gfg"></p>
<button onclick="myFunction()">Click</button>
<script>
function myFunction() {
// Sample JS object
let geeks = {
name: "Shubham",
age: 21,
Intern: "Geeksoforgeeks",
Place: "Work from Home"
};
// Converting JS object to JSON string
let gfg = JSON.stringify(geeks);
let print = "----JSON String----";
document.getElementById("gfg").innerHTML = print + "\n" + gfg;
/* alert: {"name": "Shubham", "age": 21,
"Intern": "Geeksoforgeeks",
"Place":"Work from Home"}*/
}
</script>
</body>
</html>
Output:
jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous for its philosophy of “Write less, do more”. You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.
