How to Convert JS Object to JSON String in JQuery/Javascript?

Last Updated : 30 Aug, 2024

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

Using JSON.stringify() Method
Using Lodash _.prototype.toJSON() Method
Using Object.entries() and Array.prototype.reduce()
Using jQuery

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.

JavaScript

// 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.

JavaScript

// 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:

JavaScript

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.

html

<!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.