JSON Basics and Arrays with Demo

Description: In this article, we will learn JSON Basics and Arrays with the help of Demo.

As stated on json.org

JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. It is based on a subset of the JavaScript Programming Language. JSON is a text format that is completely language independent.

JSON is built on two structures:

  • A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array. An ordered list of values.
  • In most languages, this is realized as an array, vector, list, or sequence. These are universal data structures. It makes sense that a data format that is interchangeable with programming languages also be based on these structures.

In short, we can say that it is an alternative to XML Data Interchange format.

Lets understand this with the help of Demos.

At the very first, download the jquery file using nuget package manager or from jquery.com and add its reference in your HTML file.

Example 1: JSON Data display using jquery. We will use the below code to understand how JSON is used to display data.

<!DOCTYPE html>
 
<html>
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-2.1.4.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var varJSON = {
                "Name""Mark",
                "Designation""Software Engineer",
                "Salary""50000",
                "Gender""Male"
            };
            var result = "";
            result +=
                varJSON.Name + "<br/>" +
                varJSON.Designation + "<br/>" +
                varJSON.Salary + "<br/>" +
                varJSON.Gender;
 
            $("#displayDiv").html(result);
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="displayDiv">
        </div>
    </form>
</body>
</html>
  • In the above code, we created varJSON named variable that holds the JSON data. All the data is stored between {} separated by comma (,). The “Name” is JSON Object name and its value is “Mark”. Both of them are separated using a colon (:). We can make as many objects as we want/need. All these objects needs to be separated by comma (,).
  • Now we created result variable and appended the JSON variable object’s values in it separated using break tag.
  • Finally we displayed the value of result variable by finding div using its id and appended data using html function of jquery.

Note: The best feature of Visual Studio is its intellisense. When you create JSON objects with values, the intellisense automatically shows its objects after you writes variable name and press (.)

Example 2: JSON Data display using Arrays.

<!DOCTYPE html>
 
<html>
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-2.1.4.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var varJSON = [{
                "Name""Mark",
                "Designation""Software Engineer",
                "Salary""50000",
                "Gender""Male"
            },
            {
                "Name""Jane",
                "Designation""Senior Software Engineer",
                "Salary""80000",
                "Gender""Female"
            },
            {
                "Name""Austen",
                "Designation""Project Manager",
                "Salary""100000",
                "Gender""Female"
            }];
            var result = "";
            result +=
            varJSON[0].Name + "<br/>" +
            varJSON[0].Designation + "<br/>" +
            varJSON[0].Salary + "<br/>" +
            varJSON[0].Gender + "<br/>" + "<br/>" +
            varJSON[1].Name + "<br/>" +
            varJSON[1].Designation + "<br/>" +
            varJSON[1].Salary + "<br/>" +
            varJSON[1].Gender + "<br/>" + "<br/>" +
            varJSON[2].Name + "<br/>" +
            varJSON[2].Designation + "<br/>" +
            varJSON[2].Salary + "<br/>" +
            varJSON[2].Gender + "<br/>"
            $("#displayDiv").html(result);
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="displayDiv">
        </div>
    </form>
</body>
</html>
  • In JSON, arrays are always created with this syntax [{“name”:”value”},{“name”:”value”},{“name”:”value”}] .
  • We can use this array as you can see in the example code (JSONVariable[indexValue].ObjectName)
  • Rest of the code is same as that of Example 1.

Example 3: Alternative way of creating arrays and accessing data without using index value of array variable.

<!DOCTYPE html>
 
<html>
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-2.1.4.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var varJSON =
                {
                    "Mark":
                    {
                        "Name""Mark",
                        "Designation""Software Engineer",
                        "Salary""50000",
                        "Gender""Male"
                    },
                    "Jane":
                    {
                        "Name""Jane",
                        "Designation""Senior Software Engineer",
                        "Salary""80000",
                        "Gender""Female"
                    },
                    "Austen":
                    {
                        "Name""Austen",
                        "Designation""Project Manager",
                        "Salary""100000",
                        "Gender""Female"
                    }
                };
            var result = "";
            result +=
            varJSON.Mark.Name + "<br/>" +
            varJSON.Mark.Designation + "<br/>" +
            varJSON.Mark.Salary + "<br/>" +
            varJSON.Mark.Gender + "<br/>" +
            "<br/>" +
            varJSON.Jane.Name + "<br/>" +
            varJSON.Jane.Designation + "<br/>" +
            varJSON.Jane.Salary + "<br/>" +
            varJSON.Jane.Gender + "<br/>" +
            "<br/>" +
            varJSON.Austen.Name + "<br/>" +
            varJSON.Austen.Designation + "<br/>" +
            varJSON.Austen.Salary + "<br/>" +
            varJSON.Austen.Gender + "<br/>"
            $("#displayDiv").html(result);
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="displayDiv">
        </div>
    </form>
</body>
</html>
  • Alternatively, we can create array with this syntax { “IndexName”:{“name”:”value”},”IndexName”:{“name”:”value”},”IndexName”:{“name”:”value”} }
  • If we use the above way of creating arrays, then we don’t need its index value, instead we can use its index name which is nore easy to remember.
  • We can use this array as you can see in the example code (JSONVariable.IndexName.ObjectName)

Hope you liked this tutorial. In case of any query, just comment.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s