Render your own JSON files using module_json

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

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

With this release we have also introduced a new module - { module_json }. This module brings you one step closer to using large data sets with BC.

What is this module used for?

{module_json} is used to render a custom JSON file using a custom template file you create, pretty much like how most classic BC modules work. Think of it this way:

{ module_product } uses the product related data in our back-end database and displays it according to the Individual product (small) layout .

{ module_json } uses a custom JSON file as its data source and displays it according to a template file you specify.

Let's take a look at an example

Let's assume I have a large JSON file I need to render. For this example let's use the /sampledata.json file that contains:

{
   "description":"List of a collection of Doughnuts",
   "doughnuts":[
      {
         "id":"5001",
         "type":"Plain",
         "price":0
      },
      {
         "id":"5002",
         "type":"Glazed",
         "price":1
      },
      {
         "id":"5005",
         "type":"Sugar",
         "price":1
      },
      {
         "id":"5007",
         "type":"Powdered Sugar",
         "price":1.25
      },
      {
         "id":"5006",
         "type":"Chocolate with Sprinkles",
         "price":1.5
      },
      {
         "id":"5003",
         "type":"Chocolate",
         "price":2
      },
      {
         "id":"5004",
         "type":"Maple Syrup",
         "price":2.25
      }
   ]
}

Next, we need to specify a template file that will be used to represent the data contained in /sampledata.json. The template file is /custom-templates/json-template1.tpl

<div>{{this.description}}</div>
<ul>   {%; for doughnut in this.doughnuts %}
    <li id={{doughnut.id}} type={{doughnut.type}}>
        {%; if doughnut.price == 0 %}
            Free!
{%; else %}
            Price: ${{doughnut.price}}
        {%; endif %}
    </li>
    {%; endfor %}
</ul>

Insert the module on a page to view the result. The module's syntax is:

{module_json,json="/sampledata.json" template="/custom-templates/json-template1.tpl"}

For the complete syntax for {module_json} please take a look at this reference guide page.

The page's output should look like this:

<!DOCTYPE html>
<html xmlns=" http://www.w3.org/1999/xhtml ">
    <!-- BC_OBNW -->
    <head>
        <title>Untitled page</title>
        <meta name="description" />
    </head>
    <body>
        <div>List of a collection of Doughnuts</div>
        <ul>
            <li>id=5001 type=Plain Free!</li>
            <li>id=5002 type=Glazed Price: $1</li>
            <li>id=5005 type=Sugar Price: $1</li>
            <li>id=5007 type=Powdered Sugar Price: $1.25</li>
            <li>id=5006 type=Chocolate with Sprinkles Price: $1.5</li>
            <li>id=5003 type=Chocolate Price: $2</li>
            <li>id=5004 type=Maple Syrup Price: $2.25</li>
        </ul>
    </body>
</html>

As you can see, you can have any structure of JSON and use liquid in its full (conditionals, sort, etc). The data is exposed in the same structure as the one in the data file and exposed to liquid under the {{this}} variable.