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 response from some third party api (like twitter,facebook etc.) which is in the string format. Now you want to process the response in javascript.
You can use javascript JSON.parse function to convert it to javascript object.
For example let assume you got 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 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 javascript object to the REST api it will not able to 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 same as javascript object but only diffrence 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 of JSON.stringiy is as below
JSON.stringify(value[, replacer[, space]])
Value- The value to convert to a JSON string.
replacer- This is optional parameter.A function that alters the behavior 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 properties of the object are included in the resulting JSON string.
space - Optional parameter.A string or number 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 self explanotory. Let’s focus on replacer function.
In our javascript object you can see there is a property password which is secure information. Let’s suppose you want to remove the password property while converting it to string. To achive this you can write a function which 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 password property is removed from the json string.
Reactions

Post a Comment

0 Comments

Close Menu