• JavaScript Video Tutorials

JavaScript - JSON

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. It’s 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>

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 can’t 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>

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>

Output

Converting JavaScript object to JSON string
{"name":"John Doe","age":30,"isStudent":false}
Advertisements