Hello Everyone, Once again thank you for showing the interest to reading this blog. Today,we are going to learn JSON. So without wasting time, let's become master in JSON :
What is JSON ?
JSON stands for JavaScript Object Notation. It is text based format used to store and exchange data. You must note that this is not a language. It is often used when data is sent from Server to our web page. Its syntax is quite similar to JavaScript Object thats why it is named as a JavaScript Object Notation.
Let's see and compare syntax of JS Objects and JSON :
JavaScript Object Syntax
// JS Object Syntax
var person =
{
fname: "Ravi",
lname: "Rathore"
};
console.log(person.fname); // Ravi
console.log(person.lname); // Rathore
JSON Syntax
{
"fname": "Ravi",
"lname": "Rathore"
}
Have you seen the difference between JS Object and JSON ?
As we have already told you that both syntax are almost similar but here is a minor difference between both of them.
JS Object stores value in key:value pair. If you notice towards JS Object, we only use " " on right side but in JSON, we use " " both sides in some cases. It is must in JSON to use " " on left hand side. We can't ignore them.
The another difference between these two is : in JS Object, we can use single inverted commas in place of double inverted commas but in JSON, we only need " " i.e. Double Inverted Commas
Data Types Allowed in JSON
Numerous types of Data we can store in our JSON files.
{
"fname": "Ravi", // String
"age": 28, // Number
"married": false, // Boolean
"kids": null, // Null
"hobbies": ["cricket", "music"], // Array
"vehicle": // Object
{
"type": "car",
"brand": "TATA"
}
}
If you want to validate your JSON code, you could use online tool. Some of the tool which I recommend you to :
If you code is in correct JSON format, it'll show you no error. If not,then don't worry. it'll be highlighted, so that you can understand what wrong with our code.
Let's understand more about JSON with some practical :
JavaScript Object to JSON
Yes,it is possible to convert JavaScript Object to JSON. We are taking the same example as we have made you understand earlier in this blog.
// we have written javaScript object below here
var person =
{
fname: "Ravi",
lname: "Rathore"
};
// Now, we are converting JS Object into JSON
var convertJSON = JSON.stringify(person)
console.log(convertJSON);
It you check its output, it'll show in JSON format instead of JS Object
The same way if we have a JSON code and want to turn into JS Object, we can have it by :
JSON to JavaScript Object
var person =
`{
"fname": "Ravi",
"lname": "Rathore"
}`;
var data = JSON.parse(person)
console.log(data);
Now,we have a JSON file code and want to convert it into JS Object. We have simply used JSON.parse().
If you are well aware about Fetch API, XMLHTTPREQUEST , you'll mostly get the data from APIs in form of JSON. So JSON.parse() method works well here to see data in JSON format.