Introduction of JSON

Follow @sharepointcafe

---

What is JSON?
JSON stands for Java Script Object Notation. JSON is a data exchange format between java script and server side language like jsp, asp.net etc.



How to write data in JSON format ?

Within script tag we write JSON data format.

For eg -

<script>
var jsondata = 
{
"EmployeeID" : "X1234",
"EmpDepartment" : "Information Technology"
}

alert(jsondata.EmployeeID); // You will get result 'X1234' in alert
</script>

Benefit of using JSON

JSON is lightweight data exchange format built into Java Script. JSON is very popular data interchange format now a days.

Lets see some example.
    <script>
        var Product = {
            title: "Laptop",
            id: 1001,
        }
        console.log(Product);
    </script>

Output: 

1. Object {title: "Laptop", id: 1001}
1. id:1001
2. title:"Laptop"

  <script>
        var Product = {
            title: "Laptop",
            id: 1001,
        }
       Product = JSON.stringify(Product);
        console.log(Product);
    </script>

Output: 
{"title":"Laptop","id":1001}

stringy() function converts JSON object to string.
parse() function converts string back to JSON object.

If you want to parse then before that JSON object must be stringfy.
Means you can not write this line directly:

Product = JSON.parse(Product);

Correct way to parse JSON object:

Product = JSON.stringify(Product);
Product = JSON.parse(Product);

Adding JSON obejct inside an object:

 <script>
        var Product = {
            title: "Laptop",
            id: 1001,
            description :
                {
                    weight: "2.5KG",
                    type: "Electronics",
                    stock:25
                }
        }

        console.log(Product);

    </script>

Output:

1. 1. Object {title: "Laptop", id: 1001, description: Object}
   1. description:Object
   1. stock:25
   2. type:"Electronics"
   3. weight:"2.5KG"
   4. __proto__:Object
   2. id:1001
   3. title:"Laptop"

Accessing JSON obejct inside Object:

console.log(Product.description.weight);

Output: 2.5KG


Array in JSON:

<script>
        var Product = {
            title: "Laptop",
            id: 1001,
            description :
                {
                    weight: "2.5KG",
                    type: "Electronics",
                    stock:25
                },
            color:["Red","Silver","Gray"]
        }
        console.log(Product);
    </script>

1. Object {title: "Laptop", id: 1001, description: Object, color: Array(3)}
1. color:Array(3)
1. 0:"Red"
2. 1:"Silver"
3. 2:"Gray"
4. length:3
5. __proto__:Array(0)
2. description:Object
1. stock:25
2. type:"Electronics"
3. weight:"2.5KG"
4. __proto__:Object
3. id:1001
4. title:"Laptop"

Now if you want to access array items, here is the way:

 console.log(Product.color[0]);

Output:  Red

Now Creating an Array of Object:

 <script>
            var productlist = [
            { title: "ABC Product", id: 1001 },
            { title: "XYA Product", id: 1002 },
            { title: "PQR Product", id: 1003 },
        ]
        console.log(productlist);

    </script>

Output:

1. (3) [Object, Object, Object]
1. 0:Object
1. id:1001
2. title:"ABC Product"
3. 
   
2. 1:Object
1. id:1002
2. title:"XYA Product"
3. 
   
3. 2:Object
1. id:1003
2. title:"PQR Product"

Now if you want to print first item from above productlist, in similar way we can write:

console.log(productlist[0]);

Output:

1. Object {title: "ABC Product", id: 1001}
1. id:1001
2. title:"ABC Product"

To get an specific element from object:

console.log(productlist[0].title);

Output: ABC Product

For Loop:

I will use same productlist array to implement for loop.


 for (var i = 0; i < productlist.length; i++) {
            console.log(productlist[i]);

        }

Output:

Object {title: "ABC Product", id: 1001}
Object {title: "XYA Product", id: 1002}
Object {title: "PQR Product", id: 1003}


To loop through specific element in an array of Object:

 for (var i = 0; i < productlist.length; i++) {
            console.log(productlist[i].title);
        }

Output:

ABC Product
XYA Product
PQR Product