JSON introduction with examples
All about JSON data and its type from scratch and become master in JSON
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
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 names or key-value pairs. Often it is called 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 in any programming language.
Example of JSON data-format:
Empty Collection Set
{}
Single string(key)-value pair
{
"abc" : "123"
};
Multiple strings (key)-value pairs
{
"id" : "12-323",
"name" : "Jone Doe",
"age" : 35
};
So, The JSON objects and XML serves the same purpose.
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
- XML document is difficult to read because of the syntax is verbose.
- The redundancy in syntax causes higher storage to increase the file size.
- It doesn’t support ARRAY.
- XML has so many redundancies tag.
The XML VS JSON data-format
XML File:<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>
JSON File:{"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;"
}
}}
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 the object and array are different depending on the languages.
Object: A variable that holds one or more lists 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…
Originally published at https://www.codesnipeet.com.