What is JSON?
JSON (JavaScript Object Notation) is a text-based data format used to represent objects and data structures. It is language-independent, meaning that it can be used with any programming language. JSON is often used to exchange data between a server and a web application, or between two different web applications.
JSON Features
JSON is a language independent data storage format.
- Language-independent
- Can be used to represent objects and data structures.
- Can be used to exchange data between different programming languages.
- Can be nested within other objects.
- Can contain any type of data.
JSON Syntax
JSON data is represented as key value pairs. Each key value pair is separated by a comma. JSON data is written inside curly braces.
Following is a simple syntax of JSON &minusl;
{"key1": value1,"key2": value2,...}
The key names (key1, key2, ) is always written in double quotes. The JSON data values (value1, value2, ) can contain the following data types −
- String − A sequence of characters enclosed in double quotes.
- Number − An integer or a floating-point number.
- Boolean − Either true or false.
- Array − An ordered list of values.
- Object − An unordered collection of key-value pairs.
- null − Represents the absence of a value.
JSON Data
JSON data is written as key value pairs same as a property is written in JavaScript object. Each key value pair consist of key name written in double quotes, followed by a colon, followed by a value.
"name":"John Doe"
There is a difference between JSON data and JavaScript object property. The key name in JSON data is always written in double quotes but object property name does not require this.
JSON Objects
We can create JSON object by writing the JSON data inside the curly braces. The JSON object can contain multiple key value pairs separated by comma.
{"name":"John Doe","age":30,"isStudent":false}
In JavaScript, we can parse the JSON object into a variable −
let person ={"name":"John Doe","age":30,"isStudent":false}
In the above example, the JSNO object contains three JSON data.
JSON Arrays
JSON arrays are written in brackets. We write JSON data inside the brackets to create a JSON array. An array can contain objects.
[{"name":"John Doe","age":30,"occupation":"Software Engineer"},{"name":"Jane Doe","age":25,"occupation":"Doctor"}]
In the above example, an array contains two JSON objects. The array is JSON array. Its a valid type of JSON.
Accessing JSON Data
We can access JSON data using the dot or bracket notation.
Example
In the example below, we created a JSON object with three key names name, age, and occupation, and parse it into a variable name person. Then we accessed the name using dot notation and age using the bracket notation.
<html><body><div> Accessing JSON data </div><div id="demo"></div><script>const person ={"name":"John Doe","age":30,"occupation":"Software Engineer"}
document.getElementById("demo").innerHTML ="Name: "+person.name +"<br>"+"Age: "+person.age+"<br>"+"Occupation: "+person.occupation;</script></body></html></pre>
Output
Accessing JSON data
Name: John Doe
Age: 30
Occupation: Software Engineer
As we can see in the output, it retrieved the key names "John Doe" and "30".
JSON Methods
The following table shows the JSON method and their description −
Sr.No. Name & Description 1 JSON.parse()It parses a JSON string and creates a JavaScript object. 2 JSON.stringify()It converts a JavaScript object to JSON string.
JSON vs. JavaScript Object
The JSON objects are same as the JavaScript object. Both can be converted to each other. But they have some differences −
JSON is language independent can be used to exchange data between different programming languages but JavaScript object can be used in JavaScript only.
JSON cant contain functions whereas JavaScript object can contain function as property values
The key names in JSON data is always written in double quotes but not in JavaScript objects.
Converting JSON string to JavaScript Objects
We can convert JSON to a JavaScript object using built-in function JSON.parse(). To do so first we create a JavaScript string containing the JSON object.
let jsonString ='{"name": "John Doe", "age": 30, "isStudent": false}';
Then, we use JSON.parse() function to convert string into a JavaScript object −
const jsonObject =JSON.parse(jsonString);
Example
In the example below, we define a string containing a JSON object. Then we use JSON.parse() function to parse the JSON string to a JavaScript object. Finally we displayed first JSON data value.
<html><body><div> Converting JSON string to JavaScript object</div><div id="demo"></div><script>let jsonString ='{"name": "John Doe", "age": 30, "isStudent": false}';const jsonObject =JSON.parse(jsonString);
document.getElementById("demo").innerHTML = jsonObject.name;</script></body></html></pre>
Output
Converting JSON string to JavaScript object
John Doe
As we can see in the output, the above program converted the JavaScript object to a JSON object.
Converting JavaScript Object to JSON
We can use the JavaScript built-in function JSON.stringify() to convert a JavaScript object to a JSON string.
<html><body><div> Converting JavaScript object to JSON string </div><div id="demo"></div><script>const person ={
name:"John Doe",
age:30,
isStudent:false};const jsonString =JSON.stringify(person);
document.getElementById("demo").innerHTML = jsonString;</script></body></html></pre>
Output
Converting JavaScript object to JSON string
{"name":"John Doe","age":30,"isStudent":false}