Introduction of JSON
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:
<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:
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>
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:
Now if you want to print first item from above productlist, in similar way we can write:
console.log(productlist[0]);
Output:
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
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:
<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:
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>
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:
Now if you want to print first item from above productlist, in similar way we can write:
console.log(productlist[0]);
Output:
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
Comments
Post a Comment
Dear Readers, Please post your valuable feedback in the comment section if you like this blog or if you have any suggestions. I would love to hear the same from you. Thanks