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

0 0 2 minutes read

In this example, we will learn how to convert JS Object to JSON String in jQuery/Javascript. Whenever we send the data to a web server, we send the data in the form of a string.

Below are a few methods to Convert JS Object to JSON String in JQuery/Javascript:

Using JSON.stringify() Method
Using Lodash _.prototype.toJSON() Method
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.

Syntax:

JSON.stringify(value, replacer, space)

Approach:

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.

Example: JavaScript object is converted into a string.

Javascript

// Sample JS object
const zambiatek = {
    name: "Shubham",
    age: 21,
    Intern: "Geeksoforzambiatek",
    Place: "Work from Home"
};
 
// Converting JS object to JSON string
const gfg = JSON.stringify(zambiatek);
console.log(gfg);

Output

{"name":"Shubham","age":21,"Intern":"Geeksoforzambiatek","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

Example:

Javascript

// Sample JS object
const _ = require('lodash');
const zambiatek = {
    name: "Shubham",
    age: 21,
    Intern: "Geeksoforzambiatek",
    Place: "Work from Home"
};
let res = _(zambiatek).toJSON();
console.log(res);

Output:

{"name":"Shubham","age":21,"Intern":"Geeksoforzambiatek","Place":"Work from Home"}

Method 3: Using jQuery

JavaScript object is converted into a string and generates the alert message.

Example:

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;">
        zambiatek
    </h1>
    <h3>
          How to Convert JS Object to JSON String?
    </h3>
    <h4>
        ----JSON Object----
        <br>
        {name: "Shubham", age: 21,
        Intern: "Geeksoforzambiatek",
        Place:"Work from Home"}
    </h4>
    <p id="gfg"></p>
    <button onclick="myFunction()">Click</button>
 
    <script>
        function myFunction() {
            // Sample JS object
            let zambiatek = {
                name: "Shubham",
                age: 21,
                Intern: "Geeksoforzambiatek",
                Place: "Work from Home"
            };
 
            // Converting JS object to JSON string
            let gfg = JSON.stringify(zambiatek);
            let print = "----JSON String----";
            document.getElementById("gfg").innerHTML = print + "\n" + gfg;
            /* alert: {"name": "Shubham", "age": 21,
            "Intern": "Geeksoforzambiatek",
            "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.