Render an entire page in JSON format

Updated on 20-October-2016 at 10:16 AM

Business Catalyst End of life announcement - find out more details.

Using this technique you will be able to convert entire HTML pages to JSON format and use the data in your custom scripts.

This feature enables you to create pages that output .JSON. Simply adding the ?json=true query parameter will render that page using the JSON format and the following things will happen:

  1. The page will not have any template (you cannot set a page-template on those pages)
  2. The modules are being rendered, but all of the values are correctly escaped to be JSON compatible (so you can put them directly in a JSON format)
  3. When the page is outputted, the appropriate JSON content-type is sent
  4. In order to differentiate those dynamic JSON pages from standard HTML pages, we have chosen to have those files on disk as sample.json.html

To see how this feature works just add ?json=true at the end of any page, you will see it render in the new format.

Let's see how this works with a real example. Suppose we have a webapp and we want to load its data in JSON format and do something with it.

In the past, before this feature was introduced this was not quite possible, using a custom layout did not produce a valid JSON file.

First of all let's create the custom template we will use for the webapp - /webapp-list.tpl

{
"name": "{<span>tag_name_nolink</span>}",
"content" : "{<span>tag_description</span>}"
},

The second step is to create the page the listing will be rendered on -/webapp-json-test.html and insert the webapp code below (do note you will need to change the webapp IDs below with some IDs that exist on your site):

<div id="My-webapps-listing">
{module_webapps,20216,a template="/webapp-list.tpl"} 
{module_webapps,20216,a} 
</div>

For the sake of the example let's insert the listing twice, once using the custom template and once with no custom template (the default list will be used).

The setup is almost ready. If we open up the page the listing is on it will look like a regular webapp listing - all the HTML markup is in place and all the template scripts and pagination elements will be rendered.

To convert this markup to a properly formatted JSON object and use it successfully is complicated.

Enter json=true.

Append ?json=true at the end of the page URL, in this case the link will become https://perfume10.worldsecuresystems.com/webapp-json-test?json=true. You will notice the HTML markup is now removed and only the data remains properly formatted.

Load a simple module listing as a JSON object

Let's see how we can retrieve this formatted webapp listing and use it. Pull up a new webpage and paste this code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
jQuery.get('/webapp-json-test.html?json=true', function(msg){
  entirePage = JSON.parse(msg);
  console.log(msg)
})
</script>

This will load the contents of the page, parse the content as JSON and log the resulting object in the browser's console. From this point on you can explore the 2 webapp lists in JSON format, type entirePage and the page elements will appear in JSON format:

In this example because the webapp has around 900 elements only the first 500 are shown at a time. To load the rest of the items you will need to do a second .get request on the link the entirePage.webapps_0.pagination.nextPageUrl

Load an entire page as a JSON object

To see the real versatility and power of this feature let's see how a more complex page looks like when converted to JSON. For example let's load a regular online shop page.

In the front-end the page looks like this:

This is just the default shop page, it has a menu, the shopping cart summary modules, some menus, a whoisloggedin module.

Create a new blank page, and paste the code below:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
jQuery.get('/index.html?json=true', function(msg){
  entirePage = JSON.parse(msg);
  console.log(entirePage)
})
</script>

After the content is loaded the resulting entirePage object is logged into the console. From this point on you can access the individual elements of the page and process them according to your needs.

This is how this particular page looks like in JSON format, you can see all the modules inserted to this page are described as objects: the menus with their items and CSS properties, the shoppingcartsummary output, the breadcrumbs and most importantly the catalog related information, the products listed including the name, description, ID, url, stock values, custom fields values, prices and so on:

{
   "moduleName":null,
   "moduleDescriptor":{
      "templatePath":null,
      "parameters":null,
      "apiEndpoint":null,
      "objectType":"0",
      "objectId":"0",
      "adminUrl":null
   },
   "urlculture":{
      "moduleName":"urlculture",
      "moduleDescriptor":{
         "templatePath":null,
         "parameters":"",
         "apiEndpoint":"/api/v3/urlculture",
         "objectType":"-1",
         "objectId":"-1",
         "adminUrl":""
      },
      "culture":"EN"
   },
   "whosloggedin_0":{
      "moduleName":"whosloggedin",
      "moduleDescriptor":{
         "templatePath":null,
         "parameters":"",
         "apiEndpoint":"/api/v3/whosloggedin",
         "objectType":"-1",
         "objectId":"-1",
         "adminUrl":""
      }
   },
   "menu_1":{
      "moduleName":"menu",
      "moduleDescriptor":{
         "templatePath":null,
         "parameters":"1195342",
         "apiEndpoint":"/api/v3/menu",
         "objectType":"-1",
         "objectId":"-1",
         "adminUrl":""
      },
      "menuId":1195342,
      "items":[
         {
            "id":953406,
            "parentId":-1,
            "label":"My Account",
            "tooltip":"",
            "url":"/my_account",
            "targetFrame":"",
            "image":null,
            "imageOver":null,
            "imageSelected":null,
            "css":null,
            "cssOver":null,
            "cssSelected":null,
            "width":null,
            "height":null
         },
         {
            "id":953408,
            "parentId":-1,
            "label":"Sign up",
            "tooltip":"",
            "url":"/signup_page",
            "targetFrame":"",
            "image":null,
            "imageOver":null,
            "imageSelected":null,
            "css":null,
            "cssOver":null,
            "cssSelected":null,
            "width":null,
            "height":null
         },
         {
            "id":953371,
            "parentId":-1,
            "label":"Log In",
            "tooltip":"",
            "url":"/login_page",
            "targetFrame":"",
            "image":null,
            "imageOver":null,
            "imageSelected":null,
            "css":null,
            "cssOver":null,
            "cssSelected":null,
            "width":null,
            "height":null
         }
      ]
   },
   "shoppingcartsummary_2":{
      "moduleName":"shoppingcartsummary",
      "moduleDescriptor":{
         "templatePath":null,
         "parameters":"horizontal",
         "apiEndpoint":"/api/v3/shoppingcartsummary",
         "objectType":"-1",
         "objectId":"-1",
         "adminUrl":""
      },
      "itemCount":0,
      "totalAmount":0,
      "currencyFormat":"$",
      "countryCode":"AU",
      "cartUrl":"/OrderRetrievev2.aspx?CatalogueID=138051"
   },
   "menu_3":{
      "moduleName":"menu",
      "moduleDescriptor":{
         "templatePath":null,
         "parameters":"version=\"2\",menuId=\"1195377\",moduleTemplateGroup=\"Default\"",
         "apiEndpoint":"/api/v3/menu",
         "objectType":"-1",
         "objectId":"-1",
         "adminUrl":""
      },
      "menuId":1195377,
      "items":[
         {
            "id":953388,
            "parentId":-1,
            "label":"Home",
            "tooltip":"",
            "url":"/home",
            "targetFrame":"",
            "image":null,
            "imageOver":null,
            "imageSelected":null,
            "css":"home",
            "cssOver":"",
            "cssSelected":"",
            "width":null,
            "height":null
         },
         {
            "id":953393,
            "parentId":-1,
            "label":"Shop",
            "tooltip":"Shop",
            "url":"/shop",
            "targetFrame":"",
            "image":null,
            "imageOver":null,
            "imageSelected":null,
            "css":null,
            "cssOver":null,
            "cssSelected":null,
            "width":null,
            "height":null,
            "items":[
               {
                  "id":961111,
                  "parentId":953393,
                  "label":"Kitchen",
                  "tooltip":null,
                  "url":"/kitchen",
                  "targetFrame":"",
                  "image":null,
                  "imageOver":null,
                  "imageSelected":null,
                  "css":null,
                  "cssOver":null,
                  "cssSelected":null,
                  "width":null,
                  "height":null
               },
               {
                  "id":961110,
                  "parentId":953393,
                  "label":"Home Office",
                  "tooltip":null,
                  "url":"/home-office",
                  "targetFrame":"",
                  "image":null,
                  "imageOver":null,
                  "imageSelected":null,
                  "css":null,
                  "cssOver":null,
                  "cssSelected":null,
                  "width":null,
                  "height":null
               },
               {
                  "id":961108,
                  "parentId":953393,
                  "label":"Living Room",
                  "tooltip":null,
                  "url":"/living-room",
                  "targetFrame":"",
                  "image":null,
                  "imageOver":null,
                  "imageSelected":null,
                  "css":null,
                  "cssOver":null,
                  "cssSelected":null,
                  "width":null,
                  "height":null
               },
               {
                  "id":961109,
                  "parentId":953393,
                  "label":"Bedroom",
                  "tooltip":null,
                  "url":"/bedroom",
                  "targetFrame":"",
                  "image":null,
                  "imageOver":null,
                  "imageSelected":null,
                  "css":null,
                  "cssOver":null,
                  "cssSelected":null,
                  "width":null,
                  "height":null
               }
            ]
         },
         {
            "id":961106,
            "parentId":-1,
            "label":"Blog",
            "tooltip":"",
            "url":"/BlogRetrieve.aspx?BlogID=9145",
            "targetFrame":"",
            "image":null,
            "imageOver":null,
            "imageSelected":null,
            "css":null,
            "cssOver":null,
            "cssSelected":null,
            "width":null,
            "height":null
         },
         {
            "id":953392,
            "parentId":-1,
            "label":"Forum",
            "tooltip":"",
            "url":"/forum",
            "targetFrame":"",
            "image":"",
            "imageOver":"",
            "imageSelected":"",
            "css":"",
            "cssOver":"",
            "cssSelected":"",
            "width":"",
            "height":""
         },
         {
            "id":959184,
            "parentId":-1,
            "label":"Customer FAQ",
            "tooltip":"",
            "url":"/faq",
            "targetFrame":"",
            "image":null,
            "imageOver":null,
            "imageSelected":null,
            "css":null,
            "cssOver":null,
            "cssSelected":null,
            "width":null,
            "height":null
         },
         {
            "id":953394,
            "parentId":-1,
            "label":"Contact",
            "tooltip":"",
            "url":"/contact",
            "targetFrame":"",
            "image":null,
            "imageOver":null,
            "imageSelected":null,
            "css":null,
            "cssOver":null,
            "cssSelected":null,
            "width":null,
            "height":null
         }
      ]
   },
   "overallCatalog_4":{
      "moduleName":"overallCatalog",
      "moduleDescriptor":{
         "templatePath":"/Layouts/Online Shop/page_content.html",
         "parameters":"",
         "apiEndpoint":"/api/v3/overallCatalog",
         "objectType":"26",
         "objectId":"-1",
         "adminUrl":"/Admin/Catalogues_Detail.aspx?CatalogueID=-1"
      },
      "editableFieldTypes":{
         "name":"Text",
         "description":"Html"
      },
      "name":"Shop",
      "id":"138051",
      "description":"",
      "pagination":{
         "nextPageUrl":"/shop?Page=2&Items=6"
      },
      "breadcrumbs_5":{
         "moduleName":"breadcrumbs",
         "moduleDescriptor":{
            "templatePath":null,
            "parameters":"<span>>></span>",
            "apiEndpoint":"/api/v3/breadcrumbs",
            "objectType":"-1",
            "objectId":"-1",
            "adminUrl":""
         },
         "items":[
            {
               "name":"Shop"
            }
         ]
      },
      "shoppingcartsummary_6":{
         "moduleName":"shoppingcartsummary",
         "moduleDescriptor":{
            "templatePath":null,
            "parameters":"horizontal",
            "apiEndpoint":"/api/v3/shoppingcartsummary",
            "objectType":"-1",
            "objectId":"-1",
            "adminUrl":""
         },
         "itemCount":0,
         "totalAmount":0,
         "currencyFormat":"$",
         "countryCode":"AU",
         "cartUrl":"/OrderRetrievev2.aspx?CatalogueID=138051"
      },
      "tag_cataloguelist_1_7":{
         "moduleName":"tag_cataloguelist_1",
         "moduleDescriptor":{
            "templatePath":"/Layouts/Online Shop/catalogue.html",
            "parameters":"4",
            "apiEndpoint":"/api/v3/tag_cataloguelist_1",
            "objectType":"-1",
            "objectId":"-1",
            "adminUrl":""
         }
      },
      "tag_productlist_3_8":{
         "moduleName":"tag_productlist_3",
         "moduleDescriptor":{
            "templatePath":"/Layouts/Online Shop/small_product.html",
            "parameters":"3,,6,,,true",
            "apiEndpoint":"/webresources/api/v3/sites/50815/products",
            "objectType":"-1",
            "objectId":"-1",
            "adminUrl":""
         },
         "editableFieldTypes":{
            "description":"Html",
            "id":"Id",
            "name":"Text",
            "url":"Text",
            "title":"Text",
            "smallImage":"Image",
            "releaseDate":"Date",
            "expiryDate":"Date",
            "productCode":"Text",
            "inStock":"Number",
            "onOrder":"Number",
            "reorder":"Number",
            "minUnits":"Number",
            "maxUnits":"Number",
            "unitType":"Text",
            "tags":"Text",
            "custom1":"Text",
            "custom2":"Text",
            "custom3":"Text",
            "custom4":"Text",
            "isOnSale":"Boolean",
            "retailPrice":"Number",
            "salePrice":"Number",
            "savePrice":"Number"
         },
         "items":[
            {
               "description":"This is a sample product. You can edit this product by logging in to your Admin Console and going to 'ECommerce > Products'\r\n",
               "catalogId":"138051",
               "id":"5051289",
               "name":"Product Name1",
               "url":"/shop/test",
               "title":"",
               "smallImage":"/images/img.jpg",
               "smallImageUrl":"/images/img.jpg",
               "releaseDate":"2011-05-24",
               "releaseDate_raw":"24/05/2011 5:00:00 PM",
               "expiryDate":"9999-01-01",
               "expiryDate_raw":"1/01/9999 12:00:00 AM",
               "productCode":"DMWR0IORDC",
               "inStock":"N/A",
               "onOrder":"0",
               "reorder":"",
               "minUnits":"1",
               "maxUnits":"",
               "unitType":"",
               "tags":"",
               "custom1":"",
               "custom2":"",
               "custom3":"",
               "custom4":"",
               "isOnSale":"0",
               "countryCode":"AU",
               "currencyFormat":"$",
               "countryCurrencyFormat":"AUD",
               "retailPrice":"99.00",
               "salePrice":"99.00",
               "savePrice":"0.00",
               "discountPrice":"99.00",
               "totalDiscountPrice":"99.00",
               "tax":"0.00",
               "taxRate":"0",
               "totalPrice":"99.00",
               "totalRetailPrice":"99.00",
               "taxCode":"Not Applicable",
               "urlWithHost":"https://perfume10.worldsecuresystems.com/shop/test"
            },
            {
               "description":"This is a sample product. You can edit this product by logging in to your Admin Console and going to 'ECommerce > Products'\r\n",
               "catalogId":"138051",
               "id":"5051290",
               "name":"Product Name2",
               "url":"/shop/product-name2",
               "title":"",
               "smallImage":"/images/img.jpg",
               "smallImageUrl":"/images/img.jpg",
               "releaseDate":"2011-05-26",
               "releaseDate_raw":"26/05/2011 5:00:00 PM",
               "expiryDate":"9999-01-01",
               "expiryDate_raw":"1/01/9999 12:00:00 AM",
               "productCode":"UFPUM5CD6U",
               "inStock":"N/A",
               "onOrder":"0",
               "reorder":"",
               "minUnits":"1",
               "maxUnits":"",
               "unitType":"",
               "tags":"",
               "custom1":"",
               "custom2":"",
               "custom3":"",
               "custom4":"",
               "isOnSale":"0",
               "countryCode":"AU",
               "currencyFormat":"$",
               "countryCurrencyFormat":"AUD",
               "retailPrice":"123.00",
               "salePrice":"123.00",
               "savePrice":"0.00",
               "discountPrice":"123.00",
               "totalDiscountPrice":"123.00",
               "tax":"0.00",
               "taxRate":"0",
               "totalPrice":"123.00",
               "totalRetailPrice":"123.00",
               "taxCode":"Not Applicable",
               "urlWithHost":"https://perfume10.worldsecuresystems.com/shop/product-name2"
            },
            {
               "description":"This is a sample product. You can edit this product by logging in to your Admin Console and going to 'ECommerce > Products'\r\n",
               "catalogId":"138051",
               "id":"5051291",
               "name":"Product Name3",
               "url":"/shop/product-name3",
               "title":"",
               "smallImage":"/images/img.jpg",
               "smallImageUrl":"/images/img.jpg",
               "releaseDate":"2011-05-26",
               "releaseDate_raw":"26/05/2011 5:00:00 PM",
               "expiryDate":"9999-01-01",
               "expiryDate_raw":"1/01/9999 12:00:00 AM",
               "productCode":"EU9PP20DKY",
               "inStock":"N/A",
               "onOrder":"0",
               "reorder":"",
               "minUnits":"1",
               "maxUnits":"",
               "unitType":"",
               "tags":"",
               "custom1":"",
               "custom2":"",
               "custom3":"",
               "custom4":"",
               "isOnSale":"0",
               "countryCode":"AU",
               "currencyFormat":"$",
               "countryCurrencyFormat":"AUD",
               "retailPrice":"123.00",
               "salePrice":"123.00",
               "savePrice":"0.00",
               "discountPrice":"123.00",
               "totalDiscountPrice":"123.00",
               "tax":"0.00",
               "taxRate":"0",
               "totalPrice":"123.00",
               "totalRetailPrice":"123.00",
               "taxCode":"Not Applicable",
               "urlWithHost":"https://perfume10.worldsecuresystems.com/shop/product-name3"
            },
            {
               "description":"This is a sample product. You can edit this product by logging in to your Admin Console and going to 'ECommerce > Products'\r\n",
               "catalogId":"138051",
               "id":"5051292",
               "name":"Product Name4",
               "url":"/shop/product-name4",
               "title":"",
               "smallImage":"/images/img.jpg",
               "smallImageUrl":"/images/img.jpg",
               "releaseDate":"2011-05-26",
               "releaseDate_raw":"26/05/2011 5:00:00 PM",
               "expiryDate":"9999-01-01",
               "expiryDate_raw":"1/01/9999 12:00:00 AM",
               "productCode":"8Y4RCMFBJ6",
               "inStock":"N/A",
               "onOrder":"0",
               "reorder":"",
               "minUnits":"1",
               "maxUnits":"",
               "unitType":"",
               "tags":"",
               "custom1":"",
               "custom2":"",
               "custom3":"",
               "custom4":"",
               "isOnSale":"0",
               "countryCode":"AU",
               "currencyFormat":"$",
               "countryCurrencyFormat":"AUD",
               "retailPrice":"123.00",
               "salePrice":"123.00",
               "savePrice":"0.00",
               "discountPrice":"123.00",
               "totalDiscountPrice":"123.00",
               "tax":"0.00",
               "taxRate":"0",
               "totalPrice":"123.00",
               "totalRetailPrice":"123.00",
               "taxCode":"Not Applicable",
               "urlWithHost":"https://perfume10.worldsecuresystems.com/shop/product-name4"
            },
            {
               "description":"This is a sample product. You can edit this product by logging in to your Admin Console and going to 'ECommerce > Products'\r\n",
               "catalogId":"138051",
               "id":"5051293",
               "name":"Product Name5",
               "url":"/shop/product-name5",
               "title":"",
               "smallImage":"/images/img.jpg",
               "smallImageUrl":"/images/img.jpg",
               "releaseDate":"2011-05-26",
               "releaseDate_raw":"26/05/2011 5:00:00 PM",
               "expiryDate":"9999-01-01",
               "expiryDate_raw":"1/01/9999 12:00:00 AM",
               "productCode":"WU82VFFHKB",
               "inStock":"N/A",
               "onOrder":"0",
               "reorder":"",
               "minUnits":"1",
               "maxUnits":"",
               "unitType":"",
               "tags":"",
               "custom1":"",
               "custom2":"",
               "custom3":"",
               "custom4":"",
               "isOnSale":"0",
               "countryCode":"AU",
               "currencyFormat":"$",
               "countryCurrencyFormat":"AUD",
               "retailPrice":"123.00",
               "salePrice":"123.00",
               "savePrice":"0.00",
               "discountPrice":"123.00",
               "totalDiscountPrice":"123.00",
               "tax":"0.00",
               "taxRate":"0",
               "totalPrice":"123.00",
               "totalRetailPrice":"123.00",
               "taxCode":"Not Applicable",
               "urlWithHost":"https://perfume10.worldsecuresystems.com/shop/product-name5"
            },
            {
               "description":"This is a sample product. You can edit this product by logging in to your Admin Console and going to 'ECommerce > Products'\r\n",
               "catalogId":"138051",
               "id":"5051294",
               "name":"Product Name6",
               "url":"/shop/product-name5-1",
               "title":"",
               "smallImage":"/images/img.jpg",
               "smallImageUrl":"/images/img.jpg",
               "releaseDate":"2011-05-26",
               "releaseDate_raw":"26/05/2011 5:00:00 PM",
               "expiryDate":"9999-01-01",
               "expiryDate_raw":"1/01/9999 12:00:00 AM",
               "productCode":"XXPQSP8PB0",
               "inStock":"N/A",
               "onOrder":"0",
               "reorder":"",
               "minUnits":"1",
               "maxUnits":"",
               "unitType":"",
               "tags":"",
               "custom1":"",
               "custom2":"",
               "custom3":"",
               "custom4":"",
               "isOnSale":"0",
               "countryCode":"AU",
               "currencyFormat":"$",
               "countryCurrencyFormat":"AUD",
               "retailPrice":"123.00",
               "salePrice":"123.00",
               "savePrice":"0.00",
               "discountPrice":"123.00",
               "totalDiscountPrice":"123.00",
               "tax":"0.00",
               "taxRate":"0",
               "totalPrice":"123.00",
               "totalRetailPrice":"123.00",
               "taxCode":"Not Applicable",
               "urlWithHost":"https://perfume10.worldsecuresystems.com/shop/product-name5-1"
            }
         ]
      }
   }
}