Introduction of JSON - SharePointCafe.Net

What is JSON?

JSON stands for JavaScript Object Notation. JSON is a data exchange format between javascript and server-side languages like JSP, ASP.NET etc.

Table of Contents

How to write data in JSON format ?

Within the script tag, we write JSON data format.

<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 a lightweight data exchange format built into Java Script. JSON is a very popular data interchange format nowadays.

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

Output –

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: Object {title: “Laptop”, id: 1001, description: Object}description:Objectstock:25type:“Electronics“weight:“2.5KG“__proto__:Objectid:1001title:“Laptop“

Accessing JSON obejct inside Object:

console.log(Product.description.weight);

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>

Output –

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]);

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: (3) [Object, Object, Object]

0:Object

id:1001

title:“ABC Product“

1:Object

id:1002

title:“XYA Product“

2:Object

id:1003

title:“PQR Product“

Now if you want to print the first item from the above product list, in a similar way we can write:

console.log(productlist[0]);

Output: – Object {title: “ABC Product”, id: 1001}

id:1001

title:“ABC Product“

To get an specific element from object:

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

LOOP on JSON Array

I will use the same product list array to implement for a loop.

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

        }

Output:

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

To loop through the specific elements 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

You may love to read this - JSON Functions in SQL Server