What is JSONOBJECT?
A JSONObject is an unordered collection of name/value pairs. The JSON format is often used for serializing and transmitting structured data over a network connection.
It is used primarily to transmit data between a server and web application,
serving as an alternative to XML.
for example:
Below example shows the JSON representation for list of cities in india:
{"Cities":[
{"name":"Select
City", "value":"-1"},
{"name":"Bangalore",
"value":"Bangalore"},
{"name":"Chennai","value":"Chennai"},
{"name":"Goa","value":"Goa"},
{"name":"Delhi","value":"Delhi"}
]
}
And the xml format for this will be
<Cities>
<city>
<name>Select City</name>
<value> -1</value>
</city>
<city>
<name> Bangalore </name>
<value> Bangalore </value>
</city>
<city>
<name> Chennai </name>
<value> Chennai </value>
</city>
<city>
<name>Goa</name>
<value> Goa </value>
</city>
<city>
<name>Delhi </name>
<value> Delhi</value>
</city>
</Cities >
Another Example of JSON format data is:
{
"Person":[
{
"firstName":
"Binod", "lastName": "Mahto",
"address":
{"city": "Bangalore",
"state": "Karnataka", "country": "India"},
"email":
{"provider":
"Gmail","id": "xyz@gmail.com"}
}
]
};
And the xml format
for above data is:
<person>
<firstName> Binod </firstName>
<lastName> Mahto </lastName>
<address>
<city>Bangalore</city>
<state>Karnataka</state>
<Country>India</ Country >
</address>
<Email>
<provider>Gmail</provider>
<id>xyz@gmail.com</id>
</ Email >
</person>
Advantages of using JSON:
- · It is much simpler than XML.
- · No extra tags or attributes to represent data.
- · Language independent.
- · Very lightweight text-data
- · Because of simplicity of converting xml to JSON, it is more adoptable.
Disadvantages of using JSON:
- · Lack of display capability as it’s not a mark-up language.
- · JSON does not have a <[CDATA[]]> feature, so it is not well suited to act as a carrier of sounds or images or other large binary payloads.
- · JSON is optimized for data. Besides, delivering executable programs in a data-interchange system could introduce dangerous security problems.
Now let’s see how to
consume/use JSON object in HTML.
HTML code:
<!DOCTYPE html>
<html>
<body>
<h2>JSON Object Example</h2>
<p>
Name: <span
id="jname"></span><br />
Address: <span
id="jadd"></span><br />
Contact:<span
id="jemail"></span><br />
</p>
<script>
var JSONObject= {
"Person":[
{
"firstName":
"Binod", "lastName": "Mahto",
"address":
{
"city":
"Bangalore", "state": "Karnataka",
"country": "India"
},
"email":
{
"Provider":
"Gmail","id": "xyz@gmail.com"
}
}
]
};
document.getElementById("jname").innerHTML=
JSONObject.Person[0].firstName +" "+ JSONObject.Person[0].lastName
document.getElementById("jadd").innerHTML=JSONObject.Person[0].address.city
+", "+JSONObject.Person[0].address.state+",
"+JSONObject.Person[0].address.country
document.getElementById("jemail").innerHTML=JSONObject.Person[0].email.id
</script>
</body>
Here I have created a JSON Object in JavaScript
which contains a person information. Next I am reading the values from the JSON
Object and displaying it to the HTML Page. In html I have three span html tag
with id where values are getting assigned through JavaScript.
Below is the screen shot of above html code:
Now let me show you an example of using JSONObject in asp.net mvc application. In below example I have a dropdown which shows list of countries.
Below is the code for my controller class.
Here in above code I have method called GetCountries in controller which return list of countries. Now in view we will consume this JSONObject using Jquery.
Below is the code for View:
consumption of JSONObject using Jquery call.
and below is the output :
That's all. Now you are ready to play with JSONObject.
Thank you for the reading. Feel free to give your feedback/suggestion.
Reference:
