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.NameThis 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>