JSON Template #OOTB

Add a template to the CMS using the 'Paragraph' component. Notice data-json-url, data-each, data-limit, data-string, data-email.

A JSON template script will run to get the JSON results from the data-json-url and render the results using its child element as the template. Template flexibility is limited to strings to reduce the risk of XSS attacks.


<div data-json-url="https://my.fitflop.com/assets/enquiries/international.json">
  <div class="display-none" aria-hidden="true">
    <div class="clear3 large-4 small-12 columns" data-each="dealers">
      <p class="mb0"><strong data-string="country"></strong></p>
      <p data-string="name" class="mb0"></p>
      <p data-string="description" class="mb0"></p>
      <p data-string="phone" class="mb0"></p>
      <p> <a href="mailto:email" data-email="email" class="no-decoration colour-red"></a> </p>
    </div>
  </div>
</div>

<!-- Example JSON response: -->
{
  "pressenquiries": [{
      "id": 1,
      "country": "UNITED KINGDOM",
      "name": "Fitflop",
      "description": "PR Enquiries",
      "phone": "",
      "email": "pr@fitflop.com",
      "zone": "Europe",
      "created_at": null,
      "updated_at": null
  }, {
      "id": 2,
      "country": "UNITED STATES",
      "name": "Fitflop",
      "description": "PR Enquiries",
      "phone": "",
      "email": "pr@fitflop.com",
      "zone": "USA",
      "created_at": null,
      "updated_at": null
  }
  // ... more results
  ]
}

Attribute name	Type	Description
data-each	Array	Object property name of an array to iterate over from the JSON response
data-limit	Number	Number of items to render
data-string	String	It will render as a literal string
data-email	String	It will render as a literal string with a href mailto attribute to its wrapper anchor element.

Attribute name	Type	Description
aria-hidden="true", class="display-none"	Required	Ensure to add the following attributes to your template so that it is not read by the screen reader