Best way of learning is Sharing.: 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

<city>

<name>Select City</name>

</city>

<city>

<name> Bangalore </name>

<value> Bangalore </value>

</city>

<city>

<name> Chennai </name>

<value> Chennai </value>

</city>

<city>

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

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: