Work with data object/JSON in JavaScript

Sourav.Kayal
Posted by in JavaScript category on for Beginner level | Points: 250 | Views : 3056 red flag
Rating: 5 out of 5  
 1 vote(s)

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.


Page copy protected against web site content infringement by Copyscape

About the Author

Sourav.Kayal
Full Name: Sourav Kayal
Member Level: Silver
Member Status: Member,MVP
Member Since: 6/20/2013 2:09:01 AM
Country: India
Read my blog here http://ctrlcvprogrammer.blogspot.in/
http://www.dotnetfunda.com
I am .NET developer working for HelixDNA Technologies,Bangalore in healthcare domain. Like to learn new technology and programming language. Currently working in ASP.NET ,C# and other microsoft technologies.

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)