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.
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.
Access value with an object key
- <! 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.
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.
Use Eval() function of 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>

Sam HobbsPosted Oct 28, 2013, 12:05 PM
Is the the eval() function.secure?