How to use JSON.parse and JSON.stringify in javascript

In this post, I will show you how to use JSON.stringify overloaded version

What is JSON

From Wikipedia

JSON is a language-independent data format. It was derived from JavaScript, but many modern programming languages include code to generate and parse JSON-format data. The official Internet media type for JSON is application/json. JSON filenames use the extension .json.

How to convert JSON string to Javascript Object in Javascript

Let’s suppose that you got a response from some third-party API (like Twitter, Facebook, etc.) in the string format. Now you want to process the response in javascript.
You can use javascript JSON.parse function to convert it to a javascript object.
For example, let assume you got the following response from the API

{"firstName":"santosh",
"lastName":"singh",
"email":"santosh@example.com",
"password":"somesecret"
}

Now you want to access the property value in javascript. Then you can use JSON.parse function as below

     const jsObject=JSON.parse({"firstName":"santosh","lastName":"singh","email":"santosh@example.com","password":"somesecret"});
     console.log(jsObject.firstName); // santosh
     console.log(jsObject.email); // santosh@example.com

How to convert the javascript object to JSON string

Let’s suppose you want to send your payload to some third party REST API from your client-side code. If you send the javascript object to the REST API, it will not parse it. To solve this issue, first, we convert the Javascript object to string and then send it to the REST API.
You can convert javascript object to string using JSON.stringify function as below

const user={
    firstName:'santosh',
    lastName:'singh',
    email:'santosh@example.com',
    password:'somesecret',

}
const jsonString=JSON.stringify(user)
// output
{ 
    "firstName": "santosh", 
    "lastName": "singh", 
    "email": "santosh@example.com", 
    "password": "somesecret" 
} 

You can see the output is exactly the same as a javascript object, but the only difference is that every property is a string.

Deep dive into JSON.stringify

Now let’s explore some other features of JSON.stringify. The function signature is as below.

JSON.stringify(value[, replacer[, space]])

Value- The value to convert to a JSON string.
Replacer- This is an optional parameter.A function that alters the behaviour of the stringification process, or an array of String and Number objects that serve as a whitelist for selecting/filtering the properties of the value object to be included in the JSON string. If this value is null or not provided, all object properties are included in the resulting JSON string.
space - Optional parameter.A string or number an object that’s used to insert white space into the output JSON string for readability purposes.
If this is a Number, it indicates the number of space characters to use as white space; this number is capped at 10 (if it is greater, the value is just 10). Values less than 1 indicate that no space should be used.
source
value and space is it explanatory? Let’s focus on the replacer function.
In our javascript object, you can see there is a property password that is secure information. Let’s suppose you want to remove the password property while converting it to string. To achieve this, you can write a function that takes two parameters key and value as below.

const replacer=(key,value)=>{
    if(key==='password'){
        return undefined;
    }
    return value;
}
const json=JSON.stringify(user,replacer,4);
// output
{ 
    "firstName": "santosh", 
    "lastName": "singh", 
    "email": "santosh@example.com" 
} 

You can see that the password property is removed from the JSON string.