Various ways to parse JSON data
In this article we will learn various styles to parse JSON data. This article may help young web developers beginning to develop web applications with various new technologies, like JavaScript, XML, Ajax, jQuery and so on.
So, if JSON is very new to you, don't worry, you may continue this article because at first we will explain the basics of JSON and it's basic uses and format.
What is JSON?
Let's start with something a little off-topic at first and then we will get to the main topic. Let me ask one question. Which is platform-independent? Please try to understand that we are not pointing to any programming language, we just want to explain the technology that is platform-independent. Ok, you are saying Java. The .NET community will say .NET using the Mono project. Why not think about XML and JSON ? When we are not talking about programming languages, then what's wrong with XML and JSON. Yes, if there is any pure platform-independent technology then they are XML and JSON.
So, this is the fundamental idea behind JSON. The acronym JSON stands for JavaScript Object Notation. We can say it is the latest version of data exchange technology or we can think about it as a replacement of XML. We are not saying that it is not a full replacement of XML but we can think about it as for the exchange of data between two applications.
The following are a few advantages of JSON over XML:
- JSON is very clear and easy to understand
- JSON is lighter than XML and very lightweight to transfer in the HTTP protocol.
The format
JSON is nothing but a simple string and easy to understand. It keeps information in key/value pairs. Here is a simple example of JSON data.
'{"name":"Sourav" , "surname": "kayal"} '
As we said earlier, JSON stores data in key/value pairs. In this example, name is the key and Sourav is the value, then in the next pair, surname is the key and kayal is the value.
Let's see a slightly more complex example. Try to understand the following sample.
'[{"name": "Sourav" , "surname": "kayal" },{ "name": "Ram" , "surname" : "Das"}]'
In this example we have created two person's information. Each object is separated by {} brackets. Here is a little more complex example.
'[{"name":"sourav" ,"surname":"kayal", "phone" : ["123-123456","123-98765"]]
JSON.parse method to parse JSON
This is the first technique to parse JSON data. Here we have used the JSON.parse() method to parse the JSON data. At first we declared a JSON string and we are passing this string to the parse() method.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="WebApplication.JavaScript" %>
<head id="Head1" runat="server">
<script src="jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function () {
var JSONData = '{"name":"sourav","surname":"kayal"}';
var value = JSON.parse(JSONData);
alert("Name:- " + value.name + " Surname:- " + value.surname);
});
</script>
</head>
<body>
</body>
</html>
Here is sample output.
![parse JSON]()
Eval function in JavaScript
We can use the eval function to parse JSON data. Basically the purpose of the eval function is to evaluate an expression. We can use it to parse JSON data.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="WebApplication.JavaScript" %>
<head id="Head1" runat="server">
<script src="jquery-1.7.1.min.js"></script>
<script>
//eval function in JavaScript
$(document).ready(function () {
var JSONData = '{"name":"Ram","surname":"Das"}';
var value = eval('(' + JSONData + ')');
alert("Name:- " + value.name + " Surname:- " + value.surname);
});
</script>
</head>
<body>
</body>
</html>
![Eval Function]()
JQuery.parseJSON method in jQuery
This is another jQuery method to parse JSON data. To use this method we need to include a jQuery plugin. Have a look at the following code.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="WebApplication.JavaScript" %>
<head id="Head1" runat="server">
<script src="jquery-1.7.1.min.js"></script>
<script>
//Jquery.parseJSON function in JQuery
$(document).ready(function () {
var JSONData = '{"name":"Ajay","surname":"Joshi"}';
var value = jQuery.parseJSON(JSONData);
alert("Name:- " + value.name + " Surname:- " + value.surname);
});
</script>
</head>
<body>
</body>
</html>
Here is sample output:
![JQuery parseJSON Method]()
A little more complex example:
<script>
//Jquery.parseJSON function in JQuery
$(document).ready(function () {
var JSONData = '{"name":"Sourav","surname":"Kayal","phone":["123456","54321"]}';
var value = jQuery.parseJSON(JSONData);
alert("Name:- " + value.name + " Surname:- " + value.surname + " Phone:- " + value.phone[0]);
});
</script>
In this JSON example we have defined a slightly complex JSON string. In the phone key we defined multiple phone numbers and we are retrieving then using the following code.
Value.phone[0]
Here is sample output.
![JSON]()
Conclusion
In this article we have learned various techniques to parse JSON data. Hope you have understood the concepts.