Post
Ask Question

Basics of JSON and Arrays in jQuery with Demo

JavaScript Object Notation (JSON) 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 many languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or an 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.


(As stated on json.org.)

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

Let’s understand this using demos.

At the very first, download the jQuery file using the Nuget package manager or from Jquery.com and add its reference to your HTML file.

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

  1. <!DOCTYPE html>  
  2.    
  3. <html>  
  4. <head runat="server">  
  5.     <title></title>  
  6.     <script src="Scripts/jquery-2.1.4.js"></script>  
  7.     <script type="text/javascript">  
  8.         $(document).ready(function () {  
  9.             var varJSON = {  
  10.                 "Name": "Mark",  
  11.                 "Designation": "Software Engineer",  
  12.                 "Salary": "50000",  
  13.                 "Gender": "Male"  
  14.             };  
  15.             var result = "";  
  16.             result +=  
  17.                 varJSON.Name + "<br/>" +  
  18.                 varJSON.Designation + "<br/>" +  
  19.                 varJSON.Salary + "<br/>" +  
  20.                 varJSON.Gender;  
  21.    
  22.             $("#displayDiv").html(result);  
  23.         });  
  24.     </script>  
  25. </head>  
  26. <body>  
  27.     <form id="form1" runat="server">  
  28.         <div id="displayDiv">  
  29.         </div>  
  30.     </form>  
  31. </body>  
  32. </html>  
  • In the preceding code, we created the varJSON named variable that holds the JSON data. All the data is stored between {} separated by commas (,). The "Name" is the 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 must be separated by commas (,).

  • Now we created the result variable and appended the JSON variable object's values to it separated using a break tag.

  • Finally we displayed the value of the result variable by finding the div using its id and appended the data using the HTML function of jQuery.

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

Example 2: JSON Data display using Arrays.

  1. <!DOCTYPE html>  
  2.    
  3. <html>  
  4. <head runat="server">  
  5.     <title></title>  
  6.     <script src="Scripts/jquery-2.1.4.js"></script>  
  7.     <script type="text/javascript">  
  8.         $(document).ready(function () {  
  9.             var varJSON = [{  
  10.                 "Name": "Mark",  
  11.                 "Designation": "Software Engineer",  
  12.                 "Salary": "50000",  
  13.                 "Gender": "Male"  
  14.             },  
  15.             {  
  16.                 "Name": "Jane",  
  17.                 "Designation": "Senior Software Engineer",  
  18.                 "Salary": "80000",  
  19.                 "Gender": "Female"  
  20.             },  
  21.             {  
  22.                 "Name": "Austen",  
  23.                 "Designation": "Project Manager",  
  24.                 "Salary": "100000",  
  25.                 "Gender": "Female"  
  26.             }];  
  27.             var result = "";  
  28.             result +=  
  29.             varJSON[0].Name + "<br/>" +  
  30.             varJSON[0].Designation + "<br/>" +  
  31.             varJSON[0].Salary + "<br/>" +  
  32.             varJSON[0].Gender + "<br/>" + "<br/>" +  
  33.             varJSON[1].Name + "<br/>" +  
  34.             varJSON[1].Designation + "<br/>" +  
  35.             varJSON[1].Salary + "<br/>" +  
  36.             varJSON[1].Gender + "<br/>" + "<br/>" +  
  37.             varJSON[2].Name + "<br/>" +  
  38.             varJSON[2].Designation + "<br/>" +  
  39.             varJSON[2].Salary + "<br/>" +  
  40.             varJSON[2].Gender + "<br/>"  
  41.             $("#displayDiv").html(result);  
  42.         });  
  43.     </script>  
  44. </head>  
  45. <body>  
  46.     <form id="form1" runat="server">  
  47.         <div id="displayDiv">  
  48.         </div>  
  49.     </form>  
  50. </body>  
  51. </html>  
  • In JSON, arrays are always created with the syntax [{"name":"value"},{"name":"value"},{"name":"value"}] .

  • We can use this array as you can see in the example code (JSONVariable[indexValue].ObjectName).

  • The rest of the code is the same as that of Example 1.

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

  1. <!DOCTYPE html>  
  2.    
  3. <html>  
  4. <head runat="server">  
  5.     <title></title>  
  6.     <script src="Scripts/jquery-2.1.4.js"></script>  
  7.     <script type="text/javascript">  
  8.         $(document).ready(function () {  
  9.             var varJSON =  
  10.                 {  
  11.                     "Mark":  
  12.                     {  
  13.                         "Name": "Mark",  
  14.                         "Designation": "Software Engineer",  
  15.                         "Salary": "50000",  
  16.                         "Gender": "Male"  
  17.                     },  
  18.                     "Jane":  
  19.                     {  
  20.                         "Name": "Jane",  
  21.                         "Designation": "Senior Software Engineer",  
  22.                         "Salary": "80000",  
  23.                         "Gender": "Female"  
  24.                     },  
  25.                     "Austen":  
  26.                     {  
  27.                         "Name": "Austen",  
  28.                         "Designation": "Project Manager",  
  29.                         "Salary": "100000",  
  30.                         "Gender": "Female"  
  31.                     }  
  32.                 };  
  33.             var result = "";  
  34.             result +=  
  35.             varJSON.Mark.Name + "<br/>" +  
  36.             varJSON.Mark.Designation + "<br/>" +  
  37.             varJSON.Mark.Salary + "<br/>" +  
  38.             varJSON.Mark.Gender + "<br/>" +  
  39.             "<br/>" +  
  40.             varJSON.Jane.Name + "<br/>" +  
  41.             varJSON.Jane.Designation + "<br/>" +  
  42.             varJSON.Jane.Salary + "<br/>" +  
  43.             varJSON.Jane.Gender + "<br/>" +  
  44.             "<br/>" +  
  45.             varJSON.Austen.Name + "<br/>" +  
  46.             varJSON.Austen.Designation + "<br/>" +  
  47.             varJSON.Austen.Salary + "<br/>" +  
  48.             varJSON.Austen.Gender + "<br/>"  
  49.             $("#displayDiv").html(result);  
  50.         });  
  51.     </script>  
  52. </head>  
  53. <body>  
  54.     <form id="form1" runat="server">  
  55.         <div id="displayDiv">  
  56.         </div>  
  57.     </form>  
  58. </body>  
  59. </html>  
  • Alternatively, we can create an array with the syntax { "IndexName":{"name":"value"},"IndexName":{"name":"value"},"IndexName":{"name":"value"} }.

  • If we creating arrays using the preceding way then we don't need its index value, instead we can use its index name that is easier to remember.

  • We can use this array as you can see in the example code (JSONVariable.IndexName.ObjectName)

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


Similar Articles