Parsing JSON Data Using JavaScript

Introduction

In this article, I will explain how to parse JSON data using JavaScript. Rather than going into the simple theory of JSON, I would like to show a few examples of using JavaScript to parse JSON data. As we know JSON is nothing but data representation format and very handy with JavaScript. To learn the basic concepts of JSON, I suggest you read the W3School's tutorial. So, let's start with a few examples.

Access value with an object key

In the following example, I would like to show a very simple example to parse JSON data. I have created one JavaScript function called ParseJSON() and within this function I am creating a JSON object and initialized it with four values in it, like name, surname and so on.

<! 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 id="Head1" 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 the following code we can access the value of each key.

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

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

Use Eval() function of JavaScript

In JavaScript, you might be familiar with the eval() function. If not then have a look at how to use the eval function to parse JSON data in JavaScript.

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" 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>