Parse JSON data using JavaScript

Sourav.Kayal
Posted by in JavaScript category on for Beginner level | Points: 250 | Views : 3377 red flag

This article will show how to parse JSON data using JavaScript

Parsing JSON data using JavaScript

In this article we are going to look into how to parse JSON data using JavaScript.  Rather than going simple theory of JSON let's look at few examples where we will use JavaScript to parse JSON data. As we know JSON is nothing but data represent format and very handy with JavaScript.  To know basic concept of JSON , please read W3School’s tutorial. So, Let’s start with few example.

Access value with object key

In below example lets look at a very simple example to parse JSON data. One JavaScript function called ParseJSON() is created and within this function creating JSON object and initiated four values into it like name ,Surname etc.

<! DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script language=javascript type="text/javascript">
        function ParseJSON() {
            var JSONObject = {
                "Name": "Sourav",
                "Surname": "Kayal",
                "age": 24,
                "Phone": "123456"
            };
            document.getElementById("Name").innerHTML = JSONObject.Name
            document.getElementById("Surname").innerHTML = JSONObject.Surname
            document.getElementById("age").innerHTML = JSONObject.age
            document.getElementById("Phone").innerHTML = JSONObject.Phone
        }
    </script>
 
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <div id="Name"></div>
     <div id="Surname"></div>
     <div id="age"></div>
     <div id="Phone"></div>
     <input type="button" onclick="ParseJSON()" style="width: 59px"   value ="Click me" />
     </div>
    </form>
</body>
</html>

And using below code we can access value of each key.

document.getElementById("Name").innerHTML = JSONObject.Name

This is one technique to extract data from JSON object.  In below I will show how to use Eval() function to parse JSON Data.

Use Eval() function of JavaScript

In java script you might familiar with Eval() function if not them have a look , how to use eval function to parse JSON data in JavaScript.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script language=javascript type="text/javascript">
        function ParseJSON() {
            var JSONObject = {
                "Name": "Sourav",
                "Surname": "Kayal",
                "age": 24,
                "Phone": "123456"
            };
 
            var Value = eval(JSONObject);
            document.getElementById("Name").innerHTML = Value.Name;
            document.getElementById("Surname").innerHTML = Value.Surname
            document.getElementById("age").innerHTML = Value.age
            document.getElementById("Phone").innerHTML = Value.Phone
        }
    </script>
 
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <div id="Name"></div>
     <div id="Surname"></div>
     <div id="age"></div>
     <div id="Phone"></div>
     <input type="button" onclick="ParseJSON()" style="width: 59px" value ="Click me"/>
     </div>
    </form>
</body>
</html>
 

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)