JSON

json

JSON(Javascript Object Notation)

it is light weight format for creating objects that is part of JavaScript. JSON is part of JavaScript only, its not a separate entity.

JSON is becoming more popular data-interchange format.

Creating JSON objects:

<script type=”text/javascript”>
//lets create first json object say obj1
var obj1 = {user:”raj”, age:21, country:”india”}; // json object value must be in key-value form, here user is key and value is raj
var obj2 = {user:”john will”, age:21, country:”United States”} ;
var obj3 = {u1:obj1, u2:obj2}; //you can handle any kind of data using json. this is nested object.

//now you can able to print any value using key

document.write(obj1.user); // output:raj
document.write(obj1.user+” “+ obj1.age+” “+obj1.country);

// you can also change any value of key

obj1.country = “uk”;

//how to work with nested object

document.write(obj3.u2.country); // output  United States
alert(obj3[“u2”][“country”]); // another way to represent same notation.

</script>

oky now lets move to next step.

here, you learn
how to create and place .json file in ur live web server,
making ajax request that returns .json data,
parse the data from that .json file in javascript.

oky so first create one folder say json

create one .json file say mylist.json with bellow content

{
"u1":{"user" : "jay","age" : 21,"country" : "india"},
"u2":{"user" : "ishwar","age" : 22,"country" : "india"},
"u3":{"user" : "tom","age" : 21,"country" : "us"}
}

now create one index.html file with bellow content

<!doctype html>
<html>
<head>
<script type=”text/javascript”>
function ajax_getjson()
{
var ajax = new XMLHttpRequest(); //creating ajax request object
ajax.open(“GET”,”mylist.json”,true);
ajax.setRequestHeader(“Content-type”,”application/json”); // we are fetching json type data so we have to set above header.
ajax.onreadystatechange = function(){
if(ajax.readyState == 4 && ajax.status == 200)
{
var data = JSON.parse(ajax.responseText); //parsing the ajax response through JSON.parse method.
var results = document.getElementById(“results”);
results.innerHTML=””;
for(var obj in data) // getting all data by using loop
{
results.innerHTML += data[obj].user+” is “+data[obj].age+” year old and lives in “+data[obj].country+”<br>”; //accessing value by key
}
}
}
ajax.send(null);
document.getElementById(“results”).innerHTML = “requesting….”;
}
</script>
</head>
<body>
<div id=”results”></div>
<script type=”text/javascript”> ajax_getjson(); </script> <!– calling ajax_getjson() method  –>
</body>
</html>

Advertisements

4 thoughts on “JSON

  1. great post! i am just starting out in community management marketing media and trying to learn how to do it well – resources like this article are incredibly helpful.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s