Saturday, 2 March 2013

All about JsonObject.


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: