Sunday, 3 March 2013

All about 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:
                                {"name":"Select City", "value":"-1"},
                                {"name":"Bangalore", "value":"Bangalore"},

And the xml format for this will be
<name>Select City</name>
<value> -1</value>
<name> Bangalore </name>
<value> Bangalore </value>
<name> Chennai </name>
<value> Chennai </value>
<value> Goa </value>
<name>Delhi </name>
<value> Delhi</value>
</Cities >

Another Example of JSON format data is:
                                "firstName": "Binod", "lastName": "Mahto",
                                  {"city": "Bangalore", "state": "Karnataka", "country": "India"},
                                  {"provider": "Gmail","id": ""}
And the xml format for above data is:
  <firstName> Binod </firstName>
  <lastName> Mahto </lastName>
     <Country>India</ Country >
  </ Email >

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>
<h2>JSON Object Example</h2>
Name: <span id="jname"></span><br />
Address: <span id="jadd"></span><br />
Contact:<span id="jemail"></span><br />
var JSONObject= {
                                "firstName": "Binod", "lastName": "Mahto",
                                                "city": "Bangalore", "state": "Karnataka", "country": "India"
                                                "Provider": "Gmail","id": ""
document.getElementById("jname").innerHTML= JSONObject.Person[0].firstName +" "+ JSONObject.Person[0].lastName
document.getElementById("jadd").innerHTML=JSONObject.Person[0] +", "+JSONObject.Person[0].address.state+", "+JSONObject.Person[0]

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 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.