Introduction

JSON (JavaScript Object Notation) is an open and text-based data exchange format. In other words, it is a text format for the serialization of structured data. It is derived from object literals of JavaScript.

JSON represents six data types

1. Primitive Types
2. Structure Type
JSON-represents-six-data-types.jpg

JSON Data Type

  • String: It begins and ends with double-quote marks and contains Unicode characters in a sequence. Any character may be escaped.
  • Number: A number can be an integer, real number, decimal point, with exponent part and prefix minus sign but it does not contain hex and octal forms.
  • Boolean: It contains true or false.
  • Null: empty

Array

Object

Example
  2. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JSONArray.aspx.cs" Inherits="JqueryValidation.JSONArray" %>
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  6. <html xmlns="http://www.w3.org/1999/xhtml">
  7. <head runat="server">
  8. <title></title>
  9. <style type="text/css">
  10. .border
  11. {
  12. border:1px solid #000;
  13. }
  14. </style>
  15. <script type="text/javascript">
  16. //create an Array which contains type and phoneNumber
  17. var phoneNumber = [{
  18. "type": "Home",
  19. "number": 919461162949
  20. },
  21. {
  22. "type": "Office",
  23. "number": "123456789"
  24. }]
  26. function getPhoneInfo()
  27. {
  28. var displayDiv = document.getElementById("displayDiv");
  29. var detailTable = document.createElement("table");
  30. detailTable.setAttribute("class", "border");
  32. var thType = document.createElement("th");
  33. thType.setAttribute("class", "border");
  34. thType.appendChild(document.createTextNode("Type"));
  35. detailTable.appendChild(thType);
  37. var thNumber = document.createElement("th");
  38. thNumber.setAttribute("class", "border");
  39. thNumber.appendChild(document.createTextNode("Number"));
  40. detailTable.appendChild(thNumber);
  42. for (var i = 0; i < phoneNumber.length; i++)
  43. {
  44. var row = document.createElement("tr");
  46. var colType = document.createElement("td");
  47. colType.setAttribute("class", "border");
  49. var colNumber = document.createElement("td");
  50. colNumber.setAttribute("class", "border");
  52. //Read data from Array
  53. colType.appendChild(document.createTextNode(phoneNumber[i].type));
  54. colNumber.appendChild(document.createTextNode(phoneNumber[i].number));
  56. row.appendChild(colType);
  57. row.appendChild(colNumber);
  58. detailTable.appendChild(row);
  59. }
  60. displayDiv.appendChild(detailTable);
  61. }
  62. </script>
  63. </head>
  64. <body onload="getPhoneInfo()">
  65. <form id="form1" runat="server">
  66. <div id="displayDiv">
  67. </div>
  68. </form>
  69. </body>
  70. </html>
OUTPUT
OUTPUT-JSON.jpg