In this article we will learn to process JSON data using JavaScript
Work with data object/JSON
in JavaScript
In this article we will
work on data object in JavaScript application. The data object in may represent
normal data object in form of class or JSON data. In JavaScript normal data (in
form of class) and JSON both are treated as object and using the property of object
we can extract value. We will understand the mechanism with example.
Get data from data
object
In this example we will
define one simple data object and using the property of that we will access
value. The representation of data is very much similar with JSON data format.
Here is sample code .
<body>
<form id="form1" runat="server">
<script>
var person = {
name: "sourav kayal",
degree: "MCA",
hometown: "Kolkata",
interestIn : "C#"
}
document.write("Name:-" + person.name + "<br>");
document.write("degree:- " + person.degree + "<br>");
document.write("hometown:-" + person.hometown + "<br>");
document.write("Interest In:- " + person.interestIn + "<br>");
</script>
</form>
</body>
This is sample output. Please note that , we are not using any
mechanism to parse data, using property we are accessing them.
Using JSON.parse() method to parse JSON data
In this example we will work on real JSON data. The same
data we are representing in true JSON format. Please have a look one data
representation. We are putting whole data string within single quote(‘).
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
<form id="form1" runat="server">
<script>
var person = '{"name":"sourav kayal" , "degree": "MCA", "hometown":"Kolkata", "interestIn": "C#"}';
//JSON.parse method to parse json data
var value = JSON.parse(person);
document.write("Value processing using JSON.parse()" + "<br>");
document.write("Name:-" + value.name + "<br>");
document.write("degree:- " + value.degree + "<br>");
document.write("hometown:-" + value.hometown + "<br>");
document.write("Interest In:- " + value.interestIn + "<br>");
</script>
</form>
</body>
</html>
When we are representing data in JSON format, we have to
parse it. In this example we are using JSON.parse() method to do that.
eval() method to parse JSON data
This is another way of parsing JSON data. The eval()
function of JavaScript has power to parse JSON data. Have a look on below
example.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
<form id="form1" runat="server">
<script>
var person = '{"name":"sourav kayal" , "degree": "MCA", "hometown":"Kolkata", "interestIn": "C#"}';
//eval metod to parse JSON data
var value = eval('(' + person + ')');
document.write("Value processing using eval() method" + "<br>");
document.write("Name:-" + value.name + "<br>");
document.write("degree:- " + value.degree + "<br>");
document.write("hometown:-" + value.hometown + "<br>");
document.write("Interest In:- " + value.interestIn + "<br>");
</script>
</form>
</body>
</html>
Here is sample output.
Conclusion:-
In this article we have learned various approaches to parse
JSON data. Hope you have understood and enjoyed this article.