Various Ways to Parse JSON Data

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.


Recommended Ebook

Printing in C# Made Easy

Download Now!
Similar Articles