JSON

JSON - stands for Javascript object notation. It is used to store and transmit data between server and client.

Please keep in mind that JSON data are in key/value pairs that are separated by a comma.

JSON is derived from Javascript, therefore, JSON syntax and Javascript object literal syntax look like same but both have a little bit different.

JSON Data

JSON data consists of key/value pairs. Key and value are separated by a comma. The key always exists left side while the value lies on the right side.

Keys are always kept within double quotes while value can be put either in the double quote(for string) or without double quote(in case of number).

General Syntax

JSON General Syntax
       
   "key":"value"

Example

    
    "city":"salempur"

In this example, "city" is the key while the value is "Salempur". value is put inside a double quote due to string.

JSON Object

The JSON object is written inside a curly bracket {}. It contains multi-key/value pairs. Each key-value pair is separated by a comma.

Let us understand it with the help of an example

JSON object

Example

    
     { "name": "Smith", "email": "work45@@gmail.com" }

JSON Array

It is of two types.

A JSON array is written inside a square bracket []. Let us understand it step by step with the help of an example.

JSON Array of Strings

It only contains string values. Let us see its example.

    
        ["mango","banana","orange","grape"]

JSON Array of Numbers

Let us see an example of an array of strings.

    
         [1, 4, 6, 3, 100]

JSON Array of Booleans

Let us see it with the help of an example.

    
           [true,false, false, true, true]

JSON Array of Objects

Every object is separated by a comma. Let us see its example.

       
     [
    { "name": "Smith", "age": 22 },
    { "name": "John", "age": 20 }.
    { "name": "Jane", "age": 23 }
   ] 

  

How To Access JSON Data

JSON data can be accessed either by dot operator or square bracket syntax [].

Let us see its example.

Features Of JSON

JSON is a light-weight in comparison to XML.
Easy to read by humans and machines.
JSON is language-independent.
JSON is used to send data between server and client.

Source Code

          
            <script type="text/javascript">

const users = {
    "name": "Jane",
    "age": 45,
    "expert": {
	"js" : true,
	"php" : false,
	"mysql" : "true"
    },
    "company" : ["A", "B", "C"]
}
</script>

Try it now

Example

Source Code

          
            <script type="text/javascript">
// JSON object
const user = {
"name": "Jane",
"age": 22
}
</script>

Try it now

Converting JSON To Javascript Object

You can convert JSON data to a JavaScript object using the built-in JSON.parse() function.

JSON Object
       
   const jsonData = '{ "name": "John", "age": 22 }';

 Converting To JavaScript Object
       
   const obj = JSON.parse(jsonData);

    
    console.log(obj.name); // John

General Syntax

      JSON.parse(jsonData);

Try it now

Source Code

          
            <script type="text/javascript">
const jsonTxt = '{"name":"John Doe", "age":35, "city":"Mumbai"}'
const obj = JSON.parse(jsonTxt);
</script>

Try it now

Converting JavaScript Object to JSON

You can also convert JavaScript objects to JSON format using the JavaScript built-in JSON.stringify() function. For example.

 JavaScript Object
       
 const jsonData = { name : "John", age: 22 };

 Converting To JSON
       
  const obj = JSON.stringify(jsonData);

General Syntax

      JSON.stringify(jsonData);

Try it now

Source Code

          
            <script type="text/javascript">
//json object
 const jsonData = { name: "John", age: 22 };
// converting to JSON
const obj = JSON.stringify(jsonData);
</script>

Try it now

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4