JSON stands for javascript object notation it is a way of storing and exchanging the data in this tutorial we are gonna look how to do it and how to use JSON.parse and JSON.stringify

JSON is available in all the modern browsers nowadays and also loved by a lot of programmers due to its ease and its ultimate power it is just a form of presenting the data and sending or receiving it

JSON is loved a lot due to its ease to play with it and its flexible nature due to the two weapons we have to deal with it

json.parse and json.stringfy they provide us a handy way to handle json in a groomed manner in this tutorial we are gonna look on these both

But first, a little bit intro of JSON will be a memory refresher

What is JSON?

JSON or json stands for Javascript object notation it is an easy and a lightweight way to store and exchange the data means it is used when we send some data like the client to server or when someone else sends us data Like server to client

Syntax of JSON

JSON contains a format of name or property and its value

"name" : value

They are separated by commas which is a must like this

"name" : value,
"name2" : value2

Yeah that’s all about the syntax of json

The difference in JSON and javascript objects ??

Now you might be thinking that is the json and javascript objects are not quite same the answer is No they actually are Not same they have a thin line of separation between them as you know that we can assign any value to any Property in a Javascript Object

But that’s not the case with json we can’t assign a date, a function or an undefined to any property name in json that is the biggest and enough difference to say that they are not same

If you want more theory rich understanding of JSON you can refer the MDN DOCS

Now Let’s move on to the main part

JSON.stringify

json.stringify is used to convert an object into a json string

OBJECT >>>>>>>>>>>>>>>> JSON String

Let’s see an example

//Creating an Object //
var objecttoJson = {
	"first_name": "Tony",
	"last_name" : "Stark",
	"Occupation": ["CEO Stark Industries","Iron Man"],
	"is_Hero"	:  true,
	"age"       :  54,
}

//Here Passing the object to JSON.stringify to make it a JSON string and storing in variable//

var jsonString = JSON.stringify(objecttoJson)

//Outputing it in console //

console.log(jsonString)

When you run this code it will give a result in the form of a javascript string which looks like this

{"first_name":"Tony","last_name":"Stark","Occupation":["CEO Stark Industries","Iron Man"],"is_Hero":true,"age":54}

JSON.stringify on arrays

This same method can also be used on arrays if we want

var newArray = ["Iron Man","HULK","Thor","Captain America"]

var arraytoJson = JSON.stringify(newArray)

console.log(arraytoJson)

JSON.parse()

Whereas JSON.stringify converts an object to JSON string

JSON.parse is the exact opposite it converts a JSON string to a javascript Object

JSON Sting >>>>>>>>>>>>>>>> Object

Let’s have a look at it as well

//Creating an Object //
var objecttoJson = {
	"first_name": "Tony",
	"last_name" : "Stark",
	"Occupation": ["CEO Stark Industries","Iron Man"],
	"is_Hero"	:  true,
	"age"       :  54,
};

//Here Passing the object to JSON.stringify to make it a JSON string and storing in variable//

var jsonString = JSON.stringify(objecttoJson);

//Showing the Output in Console//

console.log(jsonString);

console.log("------------------------------")
//Passing the JSON string to the JSON.parse to make it a object again //
var jsontoObject = JSON.parse(jsonString)

//Showing the Output //
console.log(jsontoObject)

In the above example, we declared an Object

Now if you run this it will output 2 things first one is a JSON string and the other one is an array Converted by using the JSON.parse

Wrapping Up

So that’s the whole concept and working of JSON.stringify and JSON.parse this whole work like

Suppose we have an object we convert it to JSON String by JSON.stringify and than again convert it to an object by JSON.parse

Object >>>>> JSON string (By JSON.stringify) >>>>>>>> Object (By JSON.parse)

Now maybe the concept of these both is clear to you

If you have any queries you can leave them in the comment section and also critics are also welcomed and waiting for appraisals as well

ALSO, READ

var vs let vs const

What is a Template String in Javascript ??