Post
Ask Question

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.
  1. <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head id="Head1" runat="server">  
  4.     <title></title>  
  5.     <script language="javascript" type="text/javascript">  
  6.                function ParseJSON() {  
  7.             var JSONObject = {  
  8.                 "Name": "Sourav",  
  9.                 "Surname": "Kayal",  
  10.                 "age": 24,  
  11.                 "Phone": "123456"  
  12.             };  
  13.             document.getElementById("Name").innerHTML = JSONObject.Name  
  14.             document.getElementById("Surname").innerHTML = JSONObject.Surname  
  15.             document.getElementById("age").innerHTML = JSONObject.age  
  16.             document.getElementById("Phone").innerHTML = JSONObject.Phone  
  17.         }  
  18.     </script>  
  19. </head>  
  20. <body>  
  21.     <form id="form1" runat="server">  
  22.     <div>  
  23.         <div id="Name">  
  24.         </div>  
  25.         <div id="Surname">  
  26.         </div>  
  27.         <div id="age">  
  28.         </div>  
  29.         <div id="Phone">  
  30.         </div>  
  31.         <input type="button" onclick="ParseJSON()" style="width: 59px" value="Click me" />  
  32.     </div>  
  33.     </form>  
  34. </body>  
  35. </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.
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head id="Head1" runat="server">  
  3.     <title></title>  
  4.     <script language=javascript type="text/javascript">  
  5.             function ParseJSON() {  
  6.             var JSONObject = {  
  7.     "Name": "Sourav",  
  8.     "Surname": "Kayal",  
  9.     "age": 24,  
  10.     "Phone": "123456"  
  11. };  
  12.             var Value = eval(JSONObject);  
  13.             document.getElementById("Name").innerHTML = Value.Name;  
  14.             document.getElementById("Surname").innerHTML = Value.Surname  
  15.             document.getElementById("age").innerHTML = Value.age  
  16.             document.getElementById("Phone").innerHTML = Value.Phone  
  17.         }  
  18.     </script>   
  19. </head>  
  20. <body>  
  21.     <form id="form1" runat="server">  
  22.     <div>  
  23.      <div id="Name"></div>  
  24.      <div id="Surname"></div>  
  25.      <div id="age"></div>  
  26.      <div id="Phone"></div>  
  27.      <input type="button" onclick="ParseJSON()" style="width: 59px" value ="Click me" />  
  28.      </div>  
  29.     </form>  
  30. </body>  
  31. </html>   


Similar Articles