{"id":5389,"date":"2016-03-15T03:14:59","date_gmt":"2016-03-15T03:14:59","guid":{"rendered":"http:\/\/www.jitendrazaa.com\/blog\/?p=5389"},"modified":"2017-03-31T05:41:58","modified_gmt":"2017-03-31T05:41:58","slug":"responsive-datagrid-component-in-lightning-basics","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/responsive-datagrid-component-in-lightning-basics\/","title":{"rendered":"Responsive Datagrid component in Lightning &#8211; Basics"},"content":{"rendered":"<p style=\"text-align: justify;\"><a href=\"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/generic-and-responsive-table-component-in-salesforce-lightning\/\"><strong>Please refer this post of latest version of responsive Datagrid Lightning Component.<\/strong><\/a><\/p>\n<p style=\"text-align: justify;\">This is a first blog post of a series, to develop advance lightning components and understand various features offered by Salesforce Lightning Platform. This post will\u00a0explain why do we need nested components and how do they communicate.<\/p>\n<p style=\"text-align: justify;\">At first, nested components looks like displaying something in child component and wrapped\u00a0in parent component. However, to make most of nested components and designing efficient Lightning components, we should use nested component only to define set of rules. Unlike components in Visualforce, where we render some reusable output on page, Nested components in Lightning defines set of attributes to be used by parent component.<\/p>\n<p style=\"text-align: justify;\">Hard to digest and imagine ? Please read on this post, you will understand concept soon.<!--more--><\/p>\n<p>Below image shows output of component we will be building here.<\/p>\n<figure id=\"attachment_5419\" aria-describedby=\"caption-attachment-5419\" style=\"width: 600px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/03\/Lightning-Data-Grid-1.gif?ssl=1\" rel=\"attachment wp-att-5419\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-5419\" src=\"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/03\/Lightning-Data-Grid-1.gif?resize=600%2C508&#038;ssl=1\" alt=\"Using Nested Lightning component to create responsive DataGrid\" width=\"600\" height=\"508\" \/><\/a><figcaption id=\"caption-attachment-5419\" class=\"wp-caption-text\">Using Nested Lightning component to create responsive DataGrid<\/figcaption><\/figure>\n<p>To start with responsive datagrid components, we need to know<\/p>\n<ul>\n<li>How many columns to show<\/li>\n<li>Heading of columns<\/li>\n<li>Column to hide in smaller screen (to get responsive behavior)<\/li>\n<li>Data in each row<\/li>\n<li>Unique identifier\u00a0on each row<\/li>\n<\/ul>\n<p style=\"text-align: justify;\">we will start with first component to define attributes about columns in responsive table.<\/p>\n<p><strong>DataColumn.cmp<\/strong><\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;aura:component &gt;\t\r\n    &lt;aura:attribute name=&quot;type&quot; type=&quot;String&quot; required=&quot;false&quot; default=&quot;text&quot; description=&quot;Type of the column to display in Datagrid&quot; \/&gt;    \r\n    &lt;aura:attribute name=&quot;label&quot; type=&quot;String&quot; required=&quot;true&quot; default=&quot;Label&quot; description=&quot;Label of the column to display in Datagrid&quot; \/&gt;    \r\n    &lt;aura:attribute name=&quot;class&quot; type=&quot;String&quot; required=&quot;false&quot; description=&quot;CSS class of the column to display in Datagrid&quot; \/&gt;    \r\n    &lt;aura:attribute name=&quot;hidden&quot; type=&quot;Boolean&quot; required=&quot;false&quot; default=&quot;false&quot; description=&quot;Hide this column in mobile mode or not&quot; \/&gt;      \r\n&lt;\/aura:component&gt;\r\n<\/pre>\n<p style=\"text-align: justify;\">This component contains information about columns datatype, heading, css class and attribute to inform that it needs to be hidden in case of small screen.<\/p>\n<p><strong>DataRow.cmp<\/strong><\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;aura:component &gt;\r\n    &lt;aura:attribute name=&quot;data&quot; type=&quot;String&quot; required=&quot;true&quot; default=&quot;text&quot; description=&quot;values in row&quot; \/&gt;   \r\n    &lt;aura:attribute name=&quot;delimiter&quot; type=&quot;String&quot; required=&quot;false&quot; default=&quot;|&quot; description=&quot;delimiter to seperate values in row&quot; \/&gt;   \r\n    &lt;aura:attribute name=&quot;uk&quot; type=&quot;String&quot; required=&quot;true&quot; description=&quot;unique key of row&quot; \/&gt;    \r\n&lt;\/aura:component&gt;\r\n<\/pre>\n<p style=\"text-align: justify;\">Above component defines properties about each row, like data to be rendered, delimiter to separate contents as a column and unique key in row. We will not be unique key in this post however, in coming post this attribute will prove to be very important.<\/p>\n<p style=\"text-align: justify;\">Both components declared above, does not perform any fancy or heavy lifting other than just declaring some attributes.<\/p>\n<p style=\"text-align: justify;\">Next component will perform rendering task by applying necessary CSS from Saleforce Lightning design system. This component assumes that it will get list of data rows and column information. It does not care about anything else. That&#8217;s advantage of Lightning components, <strong>Think in a small step<\/strong> and provide proper loose coupling and re-usability.<\/p>\n<p style=\"text-align: justify;\"><strong>DataGridTable.cmp<\/strong><\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;aura:component &gt;\r\n\t\r\n    &lt;aura:attribute name=&quot;rows&quot; type=&quot;Object&#x5B;]&quot; description=&quot;rows of table&quot; \/&gt;\r\n    &lt;aura:attribute name=&quot;cols&quot; type=&quot;Object&#x5B;]&quot; description=&quot;Columns of table&quot; \/&gt;    \r\n\r\n&lt;div class=&quot;slds&quot;&gt;\r\n&lt;table class=&quot;slds-table slds-table--bordered&quot;&gt;\r\n\r\n&lt;thead&gt;\r\n&lt;tr class=&quot;slds-text-heading--label&quot;&gt;            \t\r\n                 &lt;aura:iteration items=&quot;{!v.cols}&quot; var=&quot;col&quot;&gt;\r\n&lt;th class=&quot;{!col.class}&quot;&gt; {!col.label} &lt;\/th&gt;\r\n                &lt;\/aura:iteration&gt;                \r\n            &lt;\/tr&gt;        \t \r\n        &lt;\/thead&gt;            \r\n\r\n&lt;tbody&gt;\r\n            &lt;aura:iteration items=&quot;{!v.rows}&quot; var=&quot;row&quot;&gt;\r\n\r\n&lt;tr class=&quot;slds-hint-parent&quot;&gt; \r\n                \t&lt;aura:iteration items=&quot;{!row.dataColumns}&quot; var=&quot;colData&quot;&gt;\r\n\r\n&lt;td class=&quot;{!colData.class}&quot;&gt;\r\n                        \t{!colData.data}\r\n                        &lt;\/td&gt;\r\n\r\n                    &lt;\/aura:iteration&gt;\r\n                &lt;\/tr&gt;\r\n\r\n             &lt;\/aura:iteration&gt;              \r\n        &lt;\/tbody&gt;\r\n    \r\n    \t&lt;\/table&gt;\r\n    &lt;\/div&gt;\r\n \r\n&lt;\/aura:component&gt;\r\n<\/pre>\n<p style=\"text-align: justify;\">It uses <strong>aura:iterator<\/strong> component from Salesforce to loop through each row and column. This component also assumes that each row and column has attributes defined as per &#8220;DataRow&#8221; and &#8220;DataColumn&#8221; component.<\/p>\n<p style=\"text-align: justify;\"><strong>Giving responsive behavior to columns in table<\/strong><br \/>\nComponent &#8220;DataGridTable&#8221; assumes that column which needs to be hide has CSS class named &#8220;hidden&#8221;. Again, this component does not care about how this CSS class name assigned to this column. we will be using <strong>@media<\/strong> query of CSS to detect screen size and apply CSS accordingly.<\/p>\n<p><strong>DataGridTable.css<\/strong><\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n@media(max-width:700px){\r\n    .THIS .hidden{\r\n        display : none !important;\r\n    }\r\n}\r\n<\/pre>\n<p style=\"text-align: justify;\">Above CSS defines that if screen size is not more than 700px (means it is not viewed in desktop), then hide all elements which has CSS class &#8220;hidden&#8221;.<\/p>\n<p style=\"text-align: justify;\">Before going ahead, let&#8217;s see how we are going to use combination of nested components to render responsive table.<\/p>\n<p style=\"text-align: justify;\"><strong>ResponsiveTableDemo.app<\/strong><\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;aura:application &gt;\r\n    \r\n    &lt;c:DataGrid &gt;\r\n        &lt;c:DataColumn label=&quot;Name&quot; type=&quot;text&quot; \/&gt;\r\n        &lt;c:DataColumn label=&quot;DOB&quot; type=&quot;date&quot; \/&gt;\r\n        &lt;c:DataColumn label=&quot;Email&quot; type=&quot;Text&quot; class=&quot;hidden&quot; \/&gt;\r\n        &lt;c:DataColumn label=&quot;Mobile&quot; type=&quot;Number&quot; class=&quot;hidden&quot; \/&gt;\r\n        \r\n        &lt;c:DataRow data=&quot;Rudra|Jan-11|abc@xyz.com|1234569878&quot; delimiter=&quot;|&quot; uk=&quot;1&quot; \/&gt;\r\n        &lt;c:DataRow data=&quot;Shivanya|Feb-17|yuy@pqr.com|1234569878&quot; delimiter=&quot;|&quot; uk=&quot;2&quot; \/&gt;\r\n        &lt;c:DataRow data=&quot;Minal;Dec-31;ghy@sds.com;1234569878&quot; delimiter=&quot;;&quot; uk=&quot;3&quot;\/&gt;         \r\n    &lt;\/c:DataGrid&gt; \r\n    \r\n&lt;\/aura:application&gt;\r\n<\/pre>\n<p style=\"text-align: justify;\">We have not yet created &#8220;DataGrid&#8221; component, however you can get an idea how it will be working. &#8220;DataGrid&#8221; will contain two nested components &#8220;DataColumn&#8221; and &#8220;DataRow&#8221;. If you have observed, component &#8220;DataGridTable&#8221; is not used here as it is not nested component (because it perform rendering operation). Nested components does not perform any operation except declaring some important attributes.<\/p>\n<p style=\"text-align: justify;\">Its time to get into action and perform all heavy lifting. Till now, all components defined above are either defining some attributes (Nested components) or simply render table. However, we need to read data and nourish it so that can be used by &#8220;DataGridTable&#8221; component to render it.<\/p>\n<p><strong>DataGrid.cmp<\/strong><\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;aura:component &gt;\r\n    &lt;ltng:require styles=&quot;\/resource\/SLDS_1_0\/assets\/styles\/salesforce-lightning-design-system-ltng.css&quot; \/&gt;\r\n    \r\n    &lt;aura:attribute name=&quot;cols&quot; type=&quot;Object&#x5B;]&quot; description=&quot;attribute to hold cols&quot; \/&gt;  \r\n    &lt;aura:attribute name=&quot;rows&quot; type=&quot;object&#x5B;]&quot; description=&quot;attribute to hold rows&quot; \/&gt;\r\n    \r\n    &lt;aura:handler name=&quot;init&quot; value=&quot;{!this}&quot; action=&quot;{!c.doInit}&quot; \/&gt; \r\n    &lt;c:DataGridTable rows=&quot;{!v.rows}&quot; cols=&quot;{!v.cols}&quot; \/&gt;\r\n    \r\n&lt;\/aura:component&gt;\r\n<\/pre>\n<p style=\"text-align: justify;\">We have defined two attributes named &#8220;Cols&#8221; and &#8220;rows&#8221;. When component will be loaded, doInit method will be executed.<\/p>\n<p><strong>DataGridController.js<\/strong><\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n({\r\n\tdoInit : function(component, event, helper) {\r\n\t\thelper.OnInit(component, event, helper);\r\n\t}\r\n})\r\n<\/pre>\n<p style=\"text-align: justify;\">As per best practice of lightning component, we will not be writing any logic in client side controller of component. We will take help of Helper file as shown below.<\/p>\n<p><strong>DataGridHelper.js<\/strong><\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n({\r\n\tOnInit : function(component, event, helper) {         \r\n        var obj = this.parseTableBody(component);\r\n        component.set(&quot;v.rows&quot;, obj.rows);\t\r\n        component.set(&quot;v.cols&quot; , obj.cols);\t\r\n\t},\r\n    \r\n    parseTableBody : function(component){\r\n        \r\n        var body = \tcomponent.get(&quot;v.body&quot;);\t\r\n        \r\n        colItems = &#x5B;] ;\r\n        var  rowData = &#x5B;], rowDataItems = &#x5B;] , rowItems = &#x5B;];\r\n        \r\n        var result , currentTag ;\r\n        \r\n        for(var i = 0 ; i&lt;body.length ; i++){\r\n            currentTag = body&#x5B;i] ;\r\n            \r\n            switch(currentTag.getDef().getDescriptor().getName()){\r\n                case 'DataRow' :\r\n                    rowData = currentTag.get(&quot;v.data&quot;).split(currentTag.get(&quot;v.delimiter&quot;));\r\n                    rowDataItems = &#x5B;] ;\r\n                    \r\n                    for(var j = 0; j&lt;rowData.length ; j++){\r\n                        rowDataItems.push({\r\n                            data : rowData&#x5B;j],\r\n                            class : colItems&#x5B;j].class\r\n                        });  \r\n                    }\r\n                    rowItems .push({\r\n                        dataColumns : rowDataItems,\r\n                        uk : currentTag.get(&quot;v.uk&quot;)\r\n                    });\r\n                     \r\n                    break ;\r\n                    \r\n                case 'DataColumn' :\r\n                    colItems.push({\r\n                        label : currentTag.get(&quot;v.label&quot;) ,\r\n                        type : currentTag.get(&quot;v.type&quot;),\r\n                        class : currentTag.get(&quot;v.class&quot;)\r\n                    });\r\n                    break ;                    \r\n            }            \r\n        }\r\n        \r\n        return {\r\n            rows : rowItems,\r\n            cols : colItems\r\n        };        \r\n    }\r\n})\r\n<\/pre>\n<p style=\"text-align: justify;\">This helper file iterates through all nested component by using <strong>component.get(&#8216;v.body&#8217;)<\/strong>. It will return multiple types like DataRor or DataColumn, so we have used case statements in javascript.<\/p>\n<p style=\"text-align: justify;\">To get type of nested component, we need to use <strong>currentTag.getDef().getDescriptor().getName()<\/strong> where currentTag variable holds reference to DOM element defined in component. After that, code is quite self explanaotry, all I am doing is to covert data into understandable format which can be used in &#8220;DataGridTable&#8221; component.<\/p>\n<p>I also did, live coding of this component and recording can be watched <a href=\"https:\/\/www.livecoding.tv\/jitendra\/videos\/\">here<\/a>.<\/p>\n<p style=\"text-align: justify;\">In next post, we will replace hard-coded values by actual data using server side controller (Apex controller). We will need to perform some necessary modifications in this component as well.<\/p>\n<p style=\"text-align: justify;\">Hope, nested component&#8217;s concept makes sense to you after reading this post. Would appreciate your feedback.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This blog post explains simple use case of Nested Lightning Component. It goes through example on how to interact and combine nested components to be used in parent Lightning component.<\/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":[9],"tags":[311,212],"class_list":["post-5389","post","type-post","status-publish","format-standard","hentry","category-salesforce","tag-lightning-component","tag-video-tutorial"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":6848,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/lightning-web-component-event-handling-pub-sub\/","url_meta":{"origin":5389,"position":0},"title":"Lightning Web Component Event Handling &#8211; Pub Sub","author":"Jitendra","date":"June 21, 2019","format":false,"excerpt":"How to handle events in Lightning Web Components between nested and non nested Components","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Event Communication between Lightning Web Components","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/05\/Event-Communication-between-Lightning-Web-Components.png?fit=675%2C382&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/05\/Event-Communication-between-Lightning-Web-Components.png?fit=675%2C382&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/05\/Event-Communication-between-Lightning-Web-Components.png?fit=675%2C382&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":4646,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/compliation-of-resources-to-learn-lightning-components-in-salesforce\/","url_meta":{"origin":5389,"position":1},"title":"Compilation of resources to learn Lightning Components in Salesforce","author":"Jitendra","date":"July 8, 2015","format":false,"excerpt":"An attempt to gather all resources to learn Salesforce lightning component in one blog post","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":6176,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/lookup-component-in-salesforce-lightning\/","url_meta":{"origin":5389,"position":2},"title":"Lookup component in Salesforce Lightning","author":"Jitendra","date":"July 6, 2017","format":false,"excerpt":"Salesforce Lightning component in plain JavaScript and SLDS with complete source code","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Salesforce Lightning Lookup Component","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":5970,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/generic-and-responsive-table-component-in-salesforce-lightning\/","url_meta":{"origin":5389,"position":3},"title":"Generic and Responsive Table Component in Salesforce Lightning","author":"Jitendra","date":"March 31, 2017","format":false,"excerpt":"Complete Source code to create generic and responsive Table component in Salesforce Lightning","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"JSON format for responsive datagrid Lightning component","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/03\/JSON-format-for-responsive-datagrid-Lightning-component.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":5852,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/how-to-document-lightning-component\/","url_meta":{"origin":5389,"position":4},"title":"How to Document Lightning Component","author":"Jitendra","date":"December 19, 2016","format":false,"excerpt":"Demo and Example, showing process of documenting Lightning Component","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Documentaing Lightning Component","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/12\/Documentaing-Lightning-Component.gif?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/12\/Documentaing-Lightning-Component.gif?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/12\/Documentaing-Lightning-Component.gif?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/12\/Documentaing-Lightning-Component.gif?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/12\/Documentaing-Lightning-Component.gif?resize=1050%2C600&ssl=1 3x"},"classes":[]},{"id":6133,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/text-slider-lightning-component-for-salesforce-with-live-demo\/","url_meta":{"origin":5389,"position":5},"title":"Text Slider Lightning Component for Salesforce  with Live Demo","author":"Jitendra","date":"June 5, 2017","format":false,"excerpt":"How to use Nested Components and create a simple yet powerful Text Slider Component in Lightning for Salesforce","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Text Slider Lightning Component","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/06\/Screenshot-2017-06-04-at-9.29.26-PM.png?fit=1141%2C342&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/06\/Screenshot-2017-06-04-at-9.29.26-PM.png?fit=1141%2C342&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/06\/Screenshot-2017-06-04-at-9.29.26-PM.png?fit=1141%2C342&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/06\/Screenshot-2017-06-04-at-9.29.26-PM.png?fit=1141%2C342&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/06\/Screenshot-2017-06-04-at-9.29.26-PM.png?fit=1141%2C342&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5389","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=5389"}],"version-history":[{"count":10,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5389\/revisions"}],"predecessor-version":[{"id":5976,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5389\/revisions\/5976"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=5389"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=5389"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=5389"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}