JSON Tutorial

JSON - Introduction

• JSON stands for Javascript Object Notation.


• The JSON format was originally specified by Douglas Crockford.


• JSON is generally used to exchange or interchange data.


• JSON is light-weight and easy to understand and easy to use.


• JSON transmits data from client to server or server to client.


• File extension of JSON is ".json".


• The MIME type for JSON text is "application/json".


• JSON is language-independent. Mostly all the languages support JSON.

JSON Syntax

• Data is represented in name/value or key/value pairs.


• Data is separated by a comma.


• A name/value pair consists of a field name (in double quotes), followed by a colon, followed by a value:



"name": "JavaScript"



• JSON can be represented in two ways. They are as follows:-

1. Using curly brackets.

{
  "name": "John",
  "age": 30,
  "city": "New York"
}

2. Using Arrays.

[
  {
    "name": "John",
    "age": 30,
    "city": "New York"
  },
  {
    "name": "Mohan",
    "age": 25,
    "city": "Delhi"
  }
]

JSON Datatypes

JSON supports the following data types. They are as follows:-

• String
• Boolean
• Object
• Arrays
• null
• Number

Note:- JSON values cannot be one of the following data-types. They are as follows:-

1. function
2. date
3. undefined

Examples of JSON Datatypes

1. String

{
  "name": "Javascript"
}

2. Boolean

{
  "isEmployee": true
}

3. Object

{
  "employee":{
    "name": "JSON",
    "isEmployee": true,
  }
}

4. Arrays

{
  "fruits":["mango", "apple", "pineapple", "banana"]
}

5. null

{
  "name": null
}

6. Number

{
  "mobileNumber": 1234567890
}

Difference Between JSON and XML

JSON	XML
JSON stands for Javascript Object Notation.	XML stands for Extensible Markup Language.
JSON is simple to read and write.	XML is less simple than JSON.
JSON is easy to learn.	XML is less easy than JSON.
JSON supports array.	XML doesn't support array.
JSON doesn't provide display capabilities.	XML provides display capabilities because it is a markup language.
JSON is less secured than XML.	XML is more secure than JSON.
JSON files are more human-readable.	XML files are less human-readable.
JSON supports only text and data.	XML supports many datatypes such as text, numbers, charts, graphs, etc. Moreover, XML offers for transferring the format or structure of the data with the actual data.

Note:- JSON doesn't support comments. It is not a standard. But there is one way to represent comments in JSON by using the attribute "comments". Here is an example for your reference:-

{
"name": "John",
"age":30,
"comments": "This is a comment in JSON"
}

Note:- Here, the "comments" attribute is treated as a comment.

Accessing JSON Object

• JSON can be accessed in two ways. They are as follows:-

1. Using dot (.)

const jsonObject = {
 "name": "JSON",
 "age":30,
 "mobileNumber":1234567890,
 "isManager": false,
 "isEmployee": true,
 "salary": 60000
}

console.log(jsonObject.name);
console.log(jsonObject.age);
console.log(jsonObject.mobileNumber);
console.log(jsonObject.isManager);
console.log(jsonObject.isEmployee);
console.log(jsonObject.salary);

2. Using square bracket [""]

const jsonObject = {
 "name": "JSON",
 "age":30,
 "mobileNumber":1234567890,
 "isManager": false,
 "isEmployee": true,
 "salary": 60000
}

console.log(jsonObject["name"]);
console.log(jsonObject["age"]);
console.log(jsonObject["mobileNumber"]);
console.log(jsonObject["isManager"]);
console.log(jsonObject["isEmployee"]);
console.log(jsonObject["salary"]);

JSON.parse()

• A common use of JSON is to exchange data to/from a web server.


• When receiving data from a web server, the data is always a string.


• Parse the data with JSON.parse(), and the data becomes a javascript object.

Example to understand it more clearly is given below:

const jsonString = `{"name":"JSON","age":30,"mobileNumber":1234567890}`;

const parsedData = JSON.parse(jsonString);

console.log(parsedData);

Exceptions:- Date and functions are not allowed in JSON. If we need to include a date or function, add it as a string. We can convert it back into a date object or function later.

JSON.stringify()

• A common use of JSON is to exchange data to/from a web server.


• When sending data to a web server, the data has to be a string.


• Convert a JavaScript object into a string with JSON.stringify()

Example to understand it more clearly is given below:

const jsonString = {"name":"JSON","age":30,"mobileNumber":1234567890};

const stringedData = JSON.stringify(jsonString);

console.log(stringedData);

---

Credits: Tirtha Sharma

Twitter: Twitter Link

---

---