{"id":1499,"date":"2016-05-15T12:50:59","date_gmt":"2016-05-15T12:50:59","guid":{"rendered":"http:\/\/box.jharaphula.com\/?p=1499"},"modified":"2022-09-04T07:45:10","modified_gmt":"2022-09-04T13:15:10","slug":"learn-json-tutorial-for-beginners","status":"publish","type":"post","link":"https:\/\/jharaphula.com\/learn-json-tutorial-for-beginners\/","title":{"rendered":"JSON Tutorial for beginners &#8211; Learn JSON with Examples"},"content":{"rendered":"<p>JavaScript Object Notation (JSON) is a text-based open standard data exchange platform. It is popular due to its easy to use &amp; lightweight to handle. <strong>JSON is self-describing &amp; platform independent<\/strong>. Today nearly all advanced languages &amp; third party components supports JSON for data interchange. To open or edit a JSON file you required only a text-editor. Father of JSON is Douglas Crockford. Extension for a JSON file is .json. <strong>Media type for JSON is application\/json<\/strong>. This JSON Tutorial is special designed for beginners.<\/p>\n<h3>How to Create a JSON file?<\/h3>\n<p>As we speak above it is very easy to create a JSON file. Open a Notepad &amp; type the following codes. Save it as &lt;Your File Name&gt;.json.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">{\r\n&quot;employees&quot;: [\t\r\n{\r\n&quot;id&quot;:&quot;996782&quot;,\r\n&quot;name&quot;: &quot;Biswabhusan Panda&quot;,\r\n&quot;designation&quot;: &quot;Project Manager&quot;,\r\n&quot;organization&quot;: &quot;InfoSys&quot;\r\n},\r\n{\r\n&quot;id&quot;:&quot;996787&quot;,\r\n&quot;name&quot;: &quot;Manoj Pal&quot;,\r\n&quot;designation&quot;: &quot;Team Lead&quot;,\r\n&quot;organization&quot;: &quot;Wipro&quot;\r\n}\r\n]\r\n}<\/pre>\n<p>In the above example I created a JSON file for employees. Here for each employee <strong>I declared 4 columns id, name, designation &amp; organization<\/strong>. Employees is an array object. Here employees array contains 2 elements. I mean details of 2 employee. It can be extend further as per your requirements.<\/p>\n<h3>How JSON is different from XML?<\/h3>\n<p>During development experienced programmers also get confused about which one they need to choose for data exchange. XML or JSON. Lets us compare JSON with XML. Both these languages have some similarities. XML &amp; JSON both are self-describing &amp; hierarchical. During data binding we can fetch XML or JSON in similar ways. In the following matter JSON is rich compare to XML.<\/p>\n<ul>\n<li>Like XML tags <strong>JSON never required a end tag<\/strong>.<\/li>\n<li>Compare to XML JSON is more programmer friendly &amp; easy to learn.<\/li>\n<li>JSON can use Arrays.<\/li>\n<\/ul>\n<h3>Syntax Rule for JSON<\/h3>\n<p>JSON Syntax is derived from JAVASCRIPT. To store data in JSON we use key &amp; value pair. <strong>To represent each data unique in JSON we use commas<\/strong>. To declare an object according to JSON Syntax rule we need to follow Curly braces. Square brackets hold arrays.<\/p>\n<h3>Datatypes JSON Supports<\/h3>\n<p>JSON support Number (Integer or Floating points), String, Boolean, Array &amp; Objects. We can also store null value in a JSON objects.<\/p>\n<h3>What are the Browsers JSON Supports?<\/h3>\n<p>JSON supports Firefox 3.5, Internet Explorer 8, Google Chrome, Opera 10, Safari 4 or above.<\/p>\n<h3>How to display data from JSON to HTML page?<\/h3>\n<p><a href=\"https:\/\/jharaphula.com\/xmlhttprequest-bind-xml-to-html-table\/\" target=\"_blank\" rel=\"noopener noreferrer\">Using XMLHttpRequest object<\/a> you can easily display JSON data in HTML. Once the request send to the server in response you will receive all data in the shape of an Array. Here to display records I am using a string variable in my JS function. After string concatenation inside the for loop I am displaying str contents to div using innerHTML method.<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">&lt;html xmlns=&quot;http:\/\/www.w3.org\/1999\/xhtml&quot;&gt;\r\n&lt;body&gt;\r\n&lt;div id=&quot;displayRecords&quot;&gt;&lt;\/div&gt;\r\n&lt;script&gt;\r\nvar xmlhttp = new XMLHttpRequest();\r\nvar url = &quot;demo.txt&quot;;\r\n\r\nxmlhttp.onreadystatechange = function() {\r\nif (xmlhttp.readyState == 4 &amp;&amp; xmlhttp.status == 200) {\r\nvar paramArr = JSON.parse(xmlhttp.responseText);\r\nmyFunction(paramArr);\r\n}\r\n};\r\nxmlhttp.open(&quot;GET&quot;, url, true);\r\nxmlhttp.send();\r\n\r\nfunction myFunction(myArr) {\r\nvar str = &quot;&quot;;\r\nvar i;\r\nfor(i = 0; i &lt; myArr.length; i++) {\r\nstr += '&lt;a href=&quot;' + myArr[i].links + '&quot;&gt;' +\r\nmyArr[i].tutorial + '&lt;\/a&gt;&lt;br&gt;';\r\n}\r\ndocument.getElementById(&quot;displayRecords&quot;).innerHTML = str;\r\n}\r\n&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>JavaScript Object Notation (JSON) is a text-based open standard data exchange platform. It is popular due to its easy to use &amp; lightweight to handle&#8230;.<\/p>\n","protected":false},"author":3,"featured_media":1984,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[37161,36988,39426,39428,39427,39429],"class_list":["post-1499","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming-solutions","tag-formatted-json","tag-how-to-read-json","tag-json-tutorial-for-beginners","tag-json-with-examples","tag-learn-json","tag-syntax-rule-for-json"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JSON Tutorial for beginners - Learn JSON with Examples<\/title>\n<meta name=\"description\" content=\"JSON is self-describing &amp; platform independent technology. It helps in data inter-exchange. This JSON Tutorial is special designed for beginners to learn.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jharaphula.com\/learn-json-tutorial-for-beginners\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JSON Tutorial for beginners - Learn JSON with Examples\" \/>\n<meta property=\"og:description\" content=\"JSON is self-describing &amp; platform independent technology. It helps in data inter-exchange. This JSON Tutorial is special designed for beginners to learn.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jharaphula.com\/learn-json-tutorial-for-beginners\/\" \/>\n<meta property=\"og:site_name\" content=\"OneStop Shop\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/tajinweb\" \/>\n<meta property=\"article:published_time\" content=\"2016-05-15T12:50:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-04T13:15:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/json-for-absolute-beginners.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"492\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Nibedita Panda\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nibedita Panda\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jharaphula.com\/learn-json-tutorial-for-beginners\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jharaphula.com\/learn-json-tutorial-for-beginners\/\"},\"author\":{\"name\":\"Nibedita Panda\",\"@id\":\"https:\/\/jharaphula.com\/#\/schema\/person\/129213d91cdcccd8f9396797c56e7dc3\"},\"headline\":\"JSON Tutorial for beginners &#8211; Learn JSON with Examples\",\"datePublished\":\"2016-05-15T12:50:59+00:00\",\"dateModified\":\"2022-09-04T13:15:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jharaphula.com\/learn-json-tutorial-for-beginners\/\"},\"wordCount\":613,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/jharaphula.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/jharaphula.com\/learn-json-tutorial-for-beginners\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/json-for-absolute-beginners.jpg\",\"keywords\":[\"Formatted JSON\",\"How to read JSON\",\"JSON Tutorial for beginners\",\"JSON with Examples\",\"Learn JSON\",\"Syntax Rule for JSON\"],\"articleSection\":[\"Programming\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/jharaphula.com\/learn-json-tutorial-for-beginners\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jharaphula.com\/learn-json-tutorial-for-beginners\/\",\"url\":\"https:\/\/jharaphula.com\/learn-json-tutorial-for-beginners\/\",\"name\":\"JSON Tutorial for beginners - Learn JSON with Examples\",\"isPartOf\":{\"@id\":\"https:\/\/jharaphula.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/jharaphula.com\/learn-json-tutorial-for-beginners\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/jharaphula.com\/learn-json-tutorial-for-beginners\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/json-for-absolute-beginners.jpg\",\"datePublished\":\"2016-05-15T12:50:59+00:00\",\"dateModified\":\"2022-09-04T13:15:10+00:00\",\"description\":\"JSON is self-describing & platform independent technology. It helps in data inter-exchange. This JSON Tutorial is special designed for beginners to learn.\",\"breadcrumb\":{\"@id\":\"https:\/\/jharaphula.com\/learn-json-tutorial-for-beginners\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jharaphula.com\/learn-json-tutorial-for-beginners\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jharaphula.com\/learn-json-tutorial-for-beginners\/#primaryimage\",\"url\":\"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/json-for-absolute-beginners.jpg\",\"contentUrl\":\"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/json-for-absolute-beginners.jpg\",\"width\":750,\"height\":492,\"caption\":\"JSON Tutorial for beginners - Learn JSON with Examples\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jharaphula.com\/learn-json-tutorial-for-beginners\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jharaphula.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JSON Tutorial for beginners &#8211; Learn JSON with Examples\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jharaphula.com\/#website\",\"url\":\"https:\/\/jharaphula.com\/\",\"name\":\"OneStop Shop\",\"description\":\"Blog for SEO Guest Posting, Digital Marketing or Home Remedies\",\"publisher\":{\"@id\":\"https:\/\/jharaphula.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jharaphula.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jharaphula.com\/#organization\",\"name\":\"OneStop Shop\",\"url\":\"https:\/\/jharaphula.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jharaphula.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jharaphula.com\/wp-content\/uploads\/2023\/10\/logo.jpg\",\"contentUrl\":\"https:\/\/jharaphula.com\/wp-content\/uploads\/2023\/10\/logo.jpg\",\"width\":409,\"height\":91,\"caption\":\"OneStop Shop\"},\"image\":{\"@id\":\"https:\/\/jharaphula.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/tajinweb\",\"https:\/\/x.com\/guestpostingopp\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/jharaphula.com\/#\/schema\/person\/129213d91cdcccd8f9396797c56e7dc3\",\"name\":\"Nibedita Panda\",\"description\":\"Mrs. Nibedita is a housewife. She is passionate about to write various information's depending upon the growing market trend. In our unit she takes care of many major releases. Her contribution is most valued for us.\",\"sameAs\":[\"https:\/\/jharaphula.com\"],\"url\":\"https:\/\/jharaphula.com\/author\/nibeditap\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JSON Tutorial for beginners - Learn JSON with Examples","description":"JSON is self-describing & platform independent technology. It helps in data inter-exchange. This JSON Tutorial is special designed for beginners to learn.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jharaphula.com\/learn-json-tutorial-for-beginners\/","og_locale":"en_US","og_type":"article","og_title":"JSON Tutorial for beginners - Learn JSON with Examples","og_description":"JSON is self-describing & platform independent technology. It helps in data inter-exchange. This JSON Tutorial is special designed for beginners to learn.","og_url":"https:\/\/jharaphula.com\/learn-json-tutorial-for-beginners\/","og_site_name":"OneStop Shop","article_publisher":"https:\/\/www.facebook.com\/tajinweb","article_published_time":"2016-05-15T12:50:59+00:00","article_modified_time":"2022-09-04T13:15:10+00:00","og_image":[{"width":750,"height":492,"url":"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/json-for-absolute-beginners.jpg","type":"image\/jpeg"}],"author":"Nibedita Panda","twitter_misc":{"Written by":"Nibedita Panda","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jharaphula.com\/learn-json-tutorial-for-beginners\/#article","isPartOf":{"@id":"https:\/\/jharaphula.com\/learn-json-tutorial-for-beginners\/"},"author":{"name":"Nibedita Panda","@id":"https:\/\/jharaphula.com\/#\/schema\/person\/129213d91cdcccd8f9396797c56e7dc3"},"headline":"JSON Tutorial for beginners &#8211; Learn JSON with Examples","datePublished":"2016-05-15T12:50:59+00:00","dateModified":"2022-09-04T13:15:10+00:00","mainEntityOfPage":{"@id":"https:\/\/jharaphula.com\/learn-json-tutorial-for-beginners\/"},"wordCount":613,"commentCount":0,"publisher":{"@id":"https:\/\/jharaphula.com\/#organization"},"image":{"@id":"https:\/\/jharaphula.com\/learn-json-tutorial-for-beginners\/#primaryimage"},"thumbnailUrl":"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/json-for-absolute-beginners.jpg","keywords":["Formatted JSON","How to read JSON","JSON Tutorial for beginners","JSON with Examples","Learn JSON","Syntax Rule for JSON"],"articleSection":["Programming"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/jharaphula.com\/learn-json-tutorial-for-beginners\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/jharaphula.com\/learn-json-tutorial-for-beginners\/","url":"https:\/\/jharaphula.com\/learn-json-tutorial-for-beginners\/","name":"JSON Tutorial for beginners - Learn JSON with Examples","isPartOf":{"@id":"https:\/\/jharaphula.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/jharaphula.com\/learn-json-tutorial-for-beginners\/#primaryimage"},"image":{"@id":"https:\/\/jharaphula.com\/learn-json-tutorial-for-beginners\/#primaryimage"},"thumbnailUrl":"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/json-for-absolute-beginners.jpg","datePublished":"2016-05-15T12:50:59+00:00","dateModified":"2022-09-04T13:15:10+00:00","description":"JSON is self-describing & platform independent technology. It helps in data inter-exchange. This JSON Tutorial is special designed for beginners to learn.","breadcrumb":{"@id":"https:\/\/jharaphula.com\/learn-json-tutorial-for-beginners\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jharaphula.com\/learn-json-tutorial-for-beginners\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jharaphula.com\/learn-json-tutorial-for-beginners\/#primaryimage","url":"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/json-for-absolute-beginners.jpg","contentUrl":"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/json-for-absolute-beginners.jpg","width":750,"height":492,"caption":"JSON Tutorial for beginners - Learn JSON with Examples"},{"@type":"BreadcrumbList","@id":"https:\/\/jharaphula.com\/learn-json-tutorial-for-beginners\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jharaphula.com\/"},{"@type":"ListItem","position":2,"name":"JSON Tutorial for beginners &#8211; Learn JSON with Examples"}]},{"@type":"WebSite","@id":"https:\/\/jharaphula.com\/#website","url":"https:\/\/jharaphula.com\/","name":"OneStop Shop","description":"Blog for SEO Guest Posting, Digital Marketing or Home Remedies","publisher":{"@id":"https:\/\/jharaphula.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jharaphula.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jharaphula.com\/#organization","name":"OneStop Shop","url":"https:\/\/jharaphula.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jharaphula.com\/#\/schema\/logo\/image\/","url":"https:\/\/jharaphula.com\/wp-content\/uploads\/2023\/10\/logo.jpg","contentUrl":"https:\/\/jharaphula.com\/wp-content\/uploads\/2023\/10\/logo.jpg","width":409,"height":91,"caption":"OneStop Shop"},"image":{"@id":"https:\/\/jharaphula.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/tajinweb","https:\/\/x.com\/guestpostingopp"]},{"@type":"Person","@id":"https:\/\/jharaphula.com\/#\/schema\/person\/129213d91cdcccd8f9396797c56e7dc3","name":"Nibedita Panda","description":"Mrs. Nibedita is a housewife. She is passionate about to write various information's depending upon the growing market trend. In our unit she takes care of many major releases. Her contribution is most valued for us.","sameAs":["https:\/\/jharaphula.com"],"url":"https:\/\/jharaphula.com\/author\/nibeditap\/"}]}},"_links":{"self":[{"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/posts\/1499","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/comments?post=1499"}],"version-history":[{"count":0,"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/posts\/1499\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/media\/1984"}],"wp:attachment":[{"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/media?parent=1499"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/categories?post=1499"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/tags?post=1499"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}