{"id":2808,"date":"2012-04-18T00:10:31","date_gmt":"2012-04-17T18:40:31","guid":{"rendered":"http:\/\/JitendraZaa.com\/blog\/?p=2808"},"modified":"2012-04-18T00:10:31","modified_gmt":"2012-04-17T18:40:31","slug":"json-output-in-visualforce","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/json-output-in-visualforce\/","title":{"rendered":"JSON output in Visualforce"},"content":{"rendered":"<p>In this article, i will demonstrate using the JSON.serialize() method provided by the Salesforce to convert the class into equivalent JSON String.<\/p>\n<p>Before going into depth would like to explain the basic concept of JSON syntax for the newbie.<\/p>\n<p>There are following thumb rules i have identified from my experience, please comment in this article if i miss something here:<\/p>\n<ul>\n<li>The JSON stands for &#8220;<strong>Java Script Object Notation<\/strong>&#8220;.<\/li>\n<li>JSON is used widely as an option to xml, because the xml is very verbose whereas the JSON is having very simple\u00a0representation.<\/li>\n<li>It Simply have a key and value pair combination.<\/li>\n<li>DataTypes supported by the JSON are &#8220;Number, String, Boolean, Array, Object and null&#8221;.<\/li>\n<li>Key and value pair are separated by colon &#8220;:&#8221;<\/li>\n<li>Object is enclosed between curly brackets &#8220;{&#8221; and &#8220;}&#8221;.<\/li>\n<li>Array is enclosed using square bracket &#8220;[&#8220;, &#8220;]&#8221; separated by the comma.<\/li>\n<\/ul>\n<p>Example of JSON syntax:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n{\n     &quot;firstName&quot;: &quot;Jitendra&quot;,\n     &quot;lastName&quot; : &quot;Zaa&quot;,\n     &quot;age&quot;      : 26,\n     &quot;address&quot;  :\n     {\n         &quot;streetAddress&quot;: &quot;21 2nd Street&quot;,\n         &quot;city&quot;         : &quot;Nagpur&quot;,\n         &quot;state&quot;        : &quot;MH&quot;,\n         &quot;postalCode&quot;   : &quot;400008&quot;\n     },\n     &quot;phoneNumber&quot;:\n     &#x5B;\n         {\n           &quot;type&quot;  : &quot;Mobile&quot;,\n           &quot;number&quot;: &quot;212 555-1234&quot;\n         },\n         {\n           &quot;type&quot;  : &quot;Home&quot;,\n           &quot;number&quot;: &quot;646 555-4567&quot;\n         }\n     ]\n }\n<\/pre>\n<p><a href=\"https:\/\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/04\/VF-as-JSON.zip\">Download Source code &#8211; Visualforce page as JSON<\/a><br \/>\n<!--more--><\/p>\n<p>Now i hope that you must have got some starting information regarding the JSON syntax.<br \/>\nI am taking example of room reservation system and going to create classes in Apex and then convert all into equivalent JSON code. Following is the structure of class i need for this demo.<\/p>\n<ul>\n<li>ReservationDetail (This class will have information like start and end time of room, description and label)<\/li>\n<li>Room (This class have room and list of above class as one room can be booked by multiple users).<\/li>\n<\/ul>\n<p>Refer\u00a0<a title=\"JSON API - Salesforce\" href=\"http:\/\/www.salesforce.com\/us\/developer\/docs\/apexcode\/Content\/apex_methods_system_json.htm\">Salesforce &#8211; JSON API<\/a><\/p>\n<p>Below is the complete code of the Apex class to generate the JSON.<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\n\/**\n\tAuthor - Jitendra Zaa\n\tThis controller class is used by the VF page &quot;GanttChartData&quot; to generate the JSON\n*\/\npublic with sharing class GanttChartData {\n\n\tpublic String jsonString {get;set;}\n\n\t\/\/Constructor\n\tpublic GanttChartData()\n\t{\n\t\tjsonString = prepareData();\n\n\t}\n\t\/\/Temp Method to prepare the Data\n\tprivate String prepareData()\n\t{\n\t\tList&lt;ReservationDetail&gt; dtlObj = new List&lt;ReservationDetail&gt;();\n\n\t\tReservationDetail obj1 = new ReservationDetail();\n\t\tReservationDetail obj2 = new ReservationDetail();\n\t\tReservationDetail obj3 = new ReservationDetail();\n\n\t\tobj1.setFromDate(String.valueOf(datetime.newInstanceGmt(2012,04, 17, 0, 0, 0).getTime()));\n\t\tobj1.setToDate(String.valueOf(datetime.newInstanceGmt(2012,04, 17, 05, 30, 0).getTime()));\n\t\tobj1.desc_PH = 'Booked by : Jitendra &lt;br \/&gt; for JQuery Demo';\n\t\tobj1.label = 'Jitendra';\n\t\tobj1.customClass = 'ganttRed';\n\n\t\tobj2.setFromDate(String.valueOf(datetime.newInstanceGmt(2012,04, 17, 20, 30, 0).getTime()));\n\t\tobj2.setToDate(String.valueOf(datetime.newInstanceGmt(2012,04, 17, 23, 30, 2).getTime()));\n\t\tobj2.desc_PH = 'Booked by : Tuiya &lt;br \/&gt; for Wireless Lecture';\n\t\tobj2.label = 'Tuiya';\n\t\tobj2.customClass = 'ganttOrange';\n\n\t\tobj3.setFromDate(String.valueOf(datetime.newInstanceGmt(2012,04, 19, 09, 30, 0).getTime()));\n\t\tobj3.setToDate(String.valueOf(datetime.newInstanceGmt(2012,04, 19, 16, 30, 2).getTime()));\n\t\tobj3.desc_PH = 'Booked by : Santosh &lt;br \/&gt; for SAP Basis';\n\t\tobj3.label = 'Santosh';\n\t\tobj3.customClass = 'ganttGreen';\n\n\t\tdtlObj.add(obj1);\n\t\tdtlObj.add(obj2);\n\t\tdtlObj.add(obj3);\n\n\t\tRoom r = new Room();\n\t\tr.name = 'Training Room';\n\t\tr.desc_PH = 'This is Training Room';\n\t\tr.values = dtlObj;\n\n\t\tList&lt;Room&gt; r1 = new List&lt;Room&gt;();\n\t\tr1.add(r);\n\n\t\treturn JSON.serialize(r1);\n\t}\n\tpublic class RoomList\n\t{\n\t\tpublic List&lt;Room&gt; rooms;\n\t}\n\tpublic class Room\n\t{\n\t\tpublic String name{get;set;}\n\t\t\/\/Below var name - desc\n\t\tpublic String desc_PH{get;set;}\n\t\tpublic List&lt;ReservationDetail&gt; values{get;set;}\n\t}\n\n\tpublic class ReservationDetail\n\t{\n\t\t\/\/actual variable name needed was &quot;from&quot;, but it is keyword so we cant use that\n\t\tpublic String frm_PH{get;set;}\n\t\tpublic String to{get;set;}\n\n\t\tpublic String desc_PH{get;set;}\n\t\tpublic String label{get;set;}\n\n\t\t\/*\n\t\t\tCustom class Can be anything from below:\n\t\t\tganttRed\n\t\t\tganttGreen\n\t\t\tganttOrange\n\n\t\t*\/\n\t\tpublic String customClass{get;set;}\n\n\t\tpublic void setToDate(String val)\n\t\t{\n\t\t\tto = setDate(val);\n\t\t}\n\t\tpublic void setFromDate(String val)\n\t\t{\n\t\t\tfrm_PH = setDate(val);\n\t\t}\n\t\t\/\/Date should be in special format as it is used in regular expression\n\t\tprivate String setDate(String val)\n\t\t{\n\t\t\treturn '\/Date('+val+')\/';\n\t\t}\n\t}\n}\n<\/pre>\n<p>As you can see in above code that i am using method &#8220;<strong>JSON.serialize(Object)<\/strong>&#8221; to convert the class into JSON. the variable name will be converted as a key.<\/p>\n<p>In above code some extra logic is also added like formatting Date data, there is no need of this.<\/p>\n<p><strong>Output Visualforce page as JSON Data:<\/strong><\/p>\n<p>To output the Visualforce page as JSON Data following point needs to be taken care,<\/p>\n<ol>\n<li><strong>contentType<\/strong> should be &#8220;application\/x-JavaScript; charset=utf-8&#8221; (Note that i have not specified it as json although valid MIME type available for JSON in HTML)<\/li>\n<li><strong>showHeader<\/strong> attribute should be false.<\/li>\n<li><strong>standardStylesheets<\/strong> attribute should be false.<\/li>\n<li><strong>sidebar<\/strong> attribute should be false.<\/li>\n<li>While calling the VF page always specify explicitly that we don&#8217;t need Page editor tool of the Salesforce using <strong>core.apexpages.devmode.url=0.<\/strong><\/li>\n<\/ol>\n<p>Source code for VF:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;apex:page controller=&quot;GanttChartData&quot;  contentType=&quot;application\/x-JavaScript; charset=utf-8&quot; showHeader=&quot;false&quot; standardStylesheets=&quot;false&quot; sidebar=&quot;false&quot;&gt;\n{!jsonString}\n&lt;\/apex:page&gt;\n<\/pre>\n<p>The output of the above code is:<\/p>\n<figure id=\"attachment_2810\" aria-describedby=\"caption-attachment-2810\" style=\"width: 566px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/04\/Visualforce-page-output-as-JSON.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\" wp-image-2810 \" title=\"Visualforce page output as JSON\" src=\"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/04\/Visualforce-page-output-as-JSON.png?resize=566%2C445&#038;ssl=1\" alt=\"Visualforce page output as JSON\" width=\"566\" height=\"445\" \/><\/a><figcaption id=\"caption-attachment-2810\" class=\"wp-caption-text\">Visualforce page output as JSON<\/figcaption><\/figure>\n<p><a href=\"https:\/\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/04\/VF-as-JSON.zip\">Download Source code &#8211; Visualforce page as JSON<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Example of generating the JSON Output in Visualforce page using JSON.serialize method provided by Salesforce<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[20,9,18],"tags":[136,331,336],"class_list":["post-2808","post","type-post","status-publish","format-standard","hentry","category-apex","category-salesforce","category-visualforce","tag-json","tag-salesforce","tag-visualforce"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":3347,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/ajax-based-autocomplete-component-in-salesforce-using-jquery-ui-and-json\/","url_meta":{"origin":2808,"position":0},"title":"AutoComplete Component in Visualforce using JQueryUI","author":"Jitendra","date":"June 28, 2013","format":false,"excerpt":"In this tutorial, I am going to explain very Simple AJAX and JSON based Auto Complete component with the help of JQuery UI. First I am assuming that you already have Static Resource of named \"AutoCompleteWithModal\"\u009d. This Static resource has all images, CSS and JQuery library needed to implement this\u2026","rel":"","context":"In &quot;HTML&quot;","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"JQuery UI and JSON based AJAX AutoComplete Component in Salesforce","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2013\/06\/JQuery-UI-and-JSON-based-AJAX-AutoComplete-Component-in-Salesforce.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2013\/06\/JQuery-UI-and-JSON-based-AJAX-AutoComplete-Component-in-Salesforce.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2013\/06\/JQuery-UI-and-JSON-based-AJAX-AutoComplete-Component-in-Salesforce.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":3917,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/ajax-based-autocomplete-typeahead-directive-in-angularjs\/","url_meta":{"origin":2808,"position":1},"title":"Ajax based AutoComplete \/ TypeAhead Directive in AngularJS","author":"Jitendra","date":"July 15, 2014","format":false,"excerpt":"Previously we already discussed below Auto Complete components: Ajax Based Multiselect JQuery Autocomplete Control in ASP.Net AutoComplete Component in Visualforce using JQueryUI In this article, we will be creating TypeAhead Directive (Auto Complete) again in Salesforce However this time we will use AngularJs. Why we are using AngularJS ? We\u2026","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"TypeAhead Demo using AngularJs","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/07\/TypeAhead-Demo-using-AngularJs.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/07\/TypeAhead-Demo-using-AngularJs.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/07\/TypeAhead-Demo-using-AngularJs.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/07\/TypeAhead-Demo-using-AngularJs.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":4618,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/most-frequently-used-code-snippets-for-salesforce-developers-faq-part-21\/","url_meta":{"origin":2808,"position":2},"title":"Salesforce Developers interview questions &#8211; Most commonly used code snippets &#8211; part 21","author":"Jitendra","date":"July 7, 2015","format":false,"excerpt":"Salesforce interview questions - Most frequently used Apex and visualforce code used by Salesforce developers like \"How to query and abort scheduled job using Apex\", \"Defining VF page as HTML5\", \"Visualforce page as JSON\" , \"Handling colon in element Id for Jquery\" , \"Chatter using Apex\" and many more.","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":2817,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/gantt-chart-in-salesforce-using-jquery-and-json\/","url_meta":{"origin":2808,"position":3},"title":"Gantt Chart in Salesforce using JQuery and JSON","author":"Jitendra","date":"April 18, 2012","format":false,"excerpt":"Tutorial and Example of creating the Gantt Chart in Salesforce using JQuery and JSON","rel":"","context":"In &quot;Apex&quot;","block_context":{"text":"Apex","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/apex\/"},"img":{"alt_text":"Gantt Chart in Salesforce","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/04\/Gantt-Chart-in-Salesforce.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/04\/Gantt-Chart-in-Salesforce.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/04\/Gantt-Chart-in-Salesforce.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":3762,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/salesforce-rest-api-playground\/","url_meta":{"origin":2808,"position":4},"title":"Salesforce REST API Playground","author":"Jitendra Zaa","date":"February 25, 2014","format":false,"excerpt":"What is REST API ? In my words, Getting data from Other System or Same System using HTTP request is known as REST API. If you know, how website works, you know REST API. Before REST API, there was SOAP request which needed lots of configuration and very tightly coupled.\u2026","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"REST API playground in Salesforce","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/02\/REST-API-playground-in-Salesforce-1024x362.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/02\/REST-API-playground-in-Salesforce-1024x362.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/02\/REST-API-playground-in-Salesforce-1024x362.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":3644,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/why-should-i-use-json-over-xml\/","url_meta":{"origin":2808,"position":5},"title":"Why should I use JSON over XML ?","author":"Jitendra","date":"December 19, 2013","format":false,"excerpt":"Why should I use JSON over XML ? Why JSON is given so importance these days ? Many questions like these are asked many times by new developers. So, I decided to write this article. However last year I presented same topic and uploaded in SlideShare. Before Winter12 release, for\u2026","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/2808","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=2808"}],"version-history":[{"count":0,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/2808\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=2808"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=2808"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=2808"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}