JSON introduction with examples

What is JSON

JSON is the acronym for JavaScript object notation. It’s a data representation format called text-format. It visualizes data in a structured format. The structure is very lightweight and easy to human-readable. The machine easily can generate and parse this format.

JSON-JavaScript Object Notation

Advantages of JSON data:

 
When need to exchange data from browser to server or server to server, JSON data-format is an efficient way to do that. It’s a collection of name or key value pair. Often it is called as an object or record or associative array or dictionary or hash-table. The data are organized in an ordered list.

The most interesting thing is that JSON data-format can be used any programming language.

Example of JSON data-format

Empty Collection Set

{}

Single string(key)-value pair

  {
   "abc" : "123"
  };
  

Multiple string(key)-value pairs

{       

 "id" : "12-323",
 "name" : "Jone Doe",
 "age" : 35 

};

So, The JSON objects and XML serves the same purpose. 

So what is XML?

XML refers to Extensible Markup Language. Before JSON, XML is used for transferring Data server to client or server to server. But having some disadvantage JSON takes place in the XML.

XML-Extensible Markup Language

1. XML document is difficult to read because of the syntax is verbose.
2. The redundancy in syntax causes higher storage to increase the file size.
3. It doesn’t support ARRAY.
4. XML has so many redundancies tag.

Compare XML and JSON data-format

 

JSON file looks like

{"widget": {
    "debug": "on",
    "window": {
        "title": "Sample Konfabulator Widget",
        "name": "main_window",
        "width": 500,
        "height": 500
    },
    "image": { 
        "src": "Images/Sun.png",
        "name": "sun1",
        "hOffset": 250,
        "vOffset": 250,
        "alignment": "center"
    },
    "text": {
        "data": "Click Here",
        "size": 36,
        "style": "bold",
        "name": "text1",
        "hOffset": 250,
        "vOffset": 100,
        "alignment": "center",
        "onMouseUp": "sun1.opacity = (sun1.opacity / 100) * 90;"
    }
}}    

The XML file looks like

<widget>

    <debug>on</debug>

    <window title="Sample Konfabulator Widget">

        <name>main_window</name>

        <width>500</width>

        <height>500</height>

    </window>

    <image name="sun1" src="Images/Sun.png">

        <hoffset>250</hoffset>

        <voffset>250</voffset>

        <alignment>center</alignment>

    </image>

    <text data="Click Here" size="36">

        <name>text1</name>

        <hoffset>250</hoffset>

        <voffset>100</voffset>

        <alignment>center</alignment>

        <onmouseup>

            sun1.opacity = (sun1.opacity / 100) * 90;

        </onmouseup>

    </text>

</widget>

Both files have the same data but the format is different to use. In XML the structure is so verbose that's why JSON is growing popular day by day.

JSON data-types

It means which type of values you store within an object. Every programming language has its own data-types. Even some advanced programming languages let you create your own custom data type. But JSON is not an advanced programming language, rather than it works with data only.

Before getting started with JSON data types, firstly, we have to know the term “primitive types”.  Primitive types are the data values that are available in any language. So, given data types are available all programming languages and also in JSON.

Numbers: It may be Integers and decimal(floating point)

Strings: It may be one or more characters(simple text).

Boolean: It may be true or false

Null: It may be empty.

JSON has another two data types object and array. But the structure of object and array are different depending on the languages.

Object: A variable that holds one or more list of records.

Array: A variable that holds several values.

So, let’s explain the JSON data types

Number

{

 “age”: 35, // Integer number

 “height”:3.5 // Floating point number

}

String

  
{

 “name”: “Jone Doe”

}
  

Boolean

{

 “active_status”: false,

 “logged_status”: true

}
  
  
  

Null

{

 “firstname”: “Jone”,

 “mddlename”:””, // passing null or empty value

 “lastname”:”Doe”

}
  

Object and Array together: In this example the array includes within the JSON object.

{

 “firstname”:”Jone”,

 “lastname”:”Doe”,

 “orders”:{

  {“order_id”:101,“type”:”shirt”,”price”:250} // this particular section is an array

  {“order_id”:102,“type”:”watch”,”price”:500} // this particular section is an array

  {“order_id”:103,“type”:”hat”,”price”:200} // this particular section is an array

 }

}
  

 Stay tuned...