IDIOT DEVELOPER

Introduction to JSON
Introduction to JSON

JSON – JAVASCRIPT OBJECT NOTATION.

 

It is a simple data exchange format. It is simple light weight format that can be used for storing data. It is generally used to exchange data between  client and server. It is a simple alternative to the XML. Data in JSON format can be easily fetch and parse to be used in any programming language, which makes it very popular and user-friendly.

 

When it comes to data storage JSON is overtaking XML as preferred source of data storage.

 

Syntax

A data stored in JSON consist of two parts- a key and a value associated with it.

 

1. Key – A key is a string which is unique in a JSON object, and it is enclosed within quotation marks.

2. Value – A value is data associated with the key. A value can be a String, Number, Array, Object, etc.

 

An example of a data in JSON format. It stores a name, and an age of a person.

 


{
"name" : "John",
"age" : 22
}

 

Create an Object

Here we have created two object obj1 and obj2. Both contain a name and age as property, and a value associated with the property.

 


<script type="text/javascript">
  var obj1 = {"name" : "John",  "age" : 22}
  var obj2 = {"name" : "Luke", "age" : 25}
</script>

 

Multi-Object Data

An Object can also contain other objects in it in the form of value.

 


<script type="text/javascript">
  var p1 = {"name" : "John", "age" : 22}
  var p2 = {"name" : "Duke",  "age" : 25}
  var p3 = {"name" : "Jean", "age" : 23}
  var person  =  {"one"  : p1, "two" : p2, "three" : p3}
</script>

 

Array in Object

We can also have array data stored in JSON Object.

 

We will make two array – first will store the names of the person, and second will store the age of the person. Then we will store them in a JSON Object.

 


<script type="text/javascript">
  var names = ['John', 'Duke', 'Jean'];
  var ages = [22, 25, 23];

  var data = {"name" : names, "age" :  ages};
</script>

 

Viewing the Data

We can view a data in two – dotted way and square bracket way.

 

Dotted Way

 


console.log(person.one);   //View the p1 object
console.log(person.one.name);    //View the name property of p1 object.
console.log(person.one.age);    //View the age property of p1 object.

 

Square Bracket Way

 


console.log(person["one"]);   //View the p1 object
console.log(person["one"]["name"]);    //View the name property of p1 object.
console.log(person["one"]["age"]);    //View the age property of p1 object.

 

Viewing Array Data

The Object which contains data in form of array can be accessed using the index number.

 


console.log(data.name")   //To view the property of the data object.
console.log(data.name[0])  //To view the name at index number 0.
console.log(data.age[0])  //To view the age at index number 0.

 

Like this you can access the other data array values.

 

Updating Object Values

We can easily update the value in the JSON Object.

 

Simple object Data

 


<script type="text/javascript">
  var obj = {"name" : "John", "age" : 23}

  console.log(obj.name)    //John
  obj.name = "David";
  console.log(obj.name);    //David
</script>

 

Multi-Object Data

 


<script type="text/javascript">

  var p1 = {"name" : "John", "age" : 22}
  var p2 = {"name" : "Duke", "age" : 25}

  var person = {"one" : p1, "two" : p2}
  console.log(person.one.name)    //John
  p1.name = "David";
  console.log(person.one.name)    //David
  person.one.name = "Peter";
  console.log(person.one.name)    //Peter
  console.log(p1.name)            //Peter

</script>

 

One comment on “Introduction to JSON”

Leave a Reply

Your email address will not be published. Required fields are marked *