Template HTML 5

Leverage HTML 5 <template> element by using the data json plugin.

JSON data used by the following examples

File: demo/data-en.json

{
	"fees": {
		"ABC": "20$"
	},
	"product": "Hello world",
	"products": [
		"My new product",
		"My second product",
		"My product number 3"
	],
	"status": "text-muted",
	"iamtrue": true,
	"iamfalse": false,
	"jour":"2016-11-05T01:42:31Z",
	"anArray": [
		{ "name": "Item 1", "prop": "red" },
		{ "name": "Item 2", "prop": "blue" },
		{ "name": "Item 3", "prop": "yellow" },
		{ "name": "Item 4", "prop": "purple" }
	],
	"offices": [
		{ "name": "Location name example 1", "num": 300, "street": "Slater", "city": "Ottawa", "css": "bg-success", "homeUrl": "https://github.com/wet-boew" },
		{ "name": "Location name example 2", "num": 50, "street": "Victoria", "city": "Gatineau", "css": "bg-danger", "homeUrl": "https://github.com/wet-boew" }
	],
	"addressList": [
	{ "name": "Location name example 1", "num": 100, "street": "Slater", "city": "Ottawa", "postalCode": "J8X 0I6", "css": "bg-success", "homeUrl": "https://github.com/wet-boew", "email": "info1@example.com" },
	{ "name": "Location name example 2", "num": 65, "street": "Victoria", "city": "Gatineau", "postalCode": "J8S 0M6", "css": "bg-danger", "homeUrl": "https://github.com/wet-boew", "email": "info2@example.com" },
	{ "name": "Location name example 3", "num": 87, "street": "Slater", "city": "Ottawa", "postalCode": "J9X 0I9", "css": "bg-success", "homeUrl": "https://github.com/wet-boew", "email": "info3@example.com" },
	{ "name": "Location name example 4", "num": 34, "street": "Victoria", "city": "Gatineau", "postalCode": "J8P 0K6", "css": "bg-danger", "homeUrl": "https://github.com/wet-boew", "email": "info4@example.com" },
	{ "name": "Location name example 5", "num": 980, "street": "Slater", "city": "Ottawa", "postalCode": "J8F 5P6", "css": "bg-success", "homeUrl": "https://github.com/wet-boew", "email": "info5@example.com" },
	{ "name": "Location name example 6", "num": 1123, "street": "Victoria", "city": "Gatineau", "postalCode": "J8H 4K6", "css": "bg-danger", "homeUrl": "https://github.com/wet-boew", "email": "info6@example.com" },
	{ "name": "Location name example 7", "num": 543, "street": "Slater", "city": "Ottawa", "postalCode": "J8G 0N7", "css": "bg-success", "homeUrl": "https://github.com/wet-boew", "email": "info7@example.com" },
	{ "name": "Location name example 8", "num": 723, "street": "Victoria", "city": "Gatineau", "postalCode": "J8P 2I6", "css": "bg-danger", "homeUrl": "https://github.com/wet-boew", "email": "info8@example.com" },
	{ "name": "Location name example 9", "num": 2345, "street": "Slater", "city": "Ottawa", "postalCode": "J8P 0I7", "css": "bg-success", "homeUrl": "https://github.com/wet-boew", "email": "info9@example.com" },
	{ "name": "Location name example 10", "num": 56, "street": "Victoria", "city": "Gatineau", "postalCode": "J8X 0N6", "css": "bg-danger", "homeUrl": "https://github.com/wet-boew", "email": "info10@example.com" },
	{ "name": "Location name example 11", "num": 200, "street": "Slater", "city": "Ottawa", "postalCode": "J8T 0I8", "css": "bg-success", "homeUrl": "https://github.com/wet-boew", "email": "info11@example.com" }
	],
	"comments": {
		"2017-1": {
			"name": "Mr X",
			"city": "Gatineau",
			"somethingHTML": "<strong>Horay</strong> here rich HTML content",
			"hobby": [ "Car", "Mechanic", "Race" ],
			"language": {
				"en": {
					"description": "description of Mr X",
					"about": "About Mr X",
					"test_undefined_override": ","
				},
				"fr": {
					"description": "description de M. X",
					"about": "À propos de M. X"
				}
			}
		},
		"2017-2": {
			"name": "Mrs Y",
			"city": "St-Pierre",
			"somethingHTML": "<strong>Youpi</strong> word should be with emphasis",
			"hobby": [ "Spa", "Nature", "Bike", "Reading" ],
			"language": {
				"en": {
					"description": "description of Mrs Y",
					"about": "About Mrs Y"
				},
				"fr": {
					"description": "description de Mme. Y",
					"about": "À propos de Mme. Y"
				}
			}
		}
	}
}

List

Definition list:

Unordered:

Ordered:

Source code

<p>Definition list:</p>
<dl class="dl-horizontal" data-wb-json='{
		"url": "demo/data-en.json#/anArray",
		"mapping": [
			{ "selector": "dt", "value": "/name" },
			{ "selector": "dd", "value": "/prop" }
		]
	}'>
	<template>
		<dt></dt>
		<dd></dd>
	</template>
</dl>

<p>Unordered:</p>
<ul class="lst-spcd" data-wb-json='{
		"url": "demo/data-en.json#/anArray",
		"queryall": "li",
		"mapping": [
			"/name"
		]
	}'>
	<template>
		<li></li>
	</template>
</ul>

<p>Ordered:</p>
<ol class="lst-spcd" data-wb-json='{
		"url": "demo/data-en.json#/anArray",
		"queryall": "li",
		"mapping": [
			"/name"
		]
	}'>
	<template>
		<li></li>
	</template>
</ol>

Render JSON value as HTML

With the HTML rendering
Name	City	Something in HTML

Without the HTML rendering
Name	City	Something in HTML

Source code

<table class="table">
	<caption>With the HTML rendering</caption>
	<thead>
		<tr>
			<th>Name</th>
			<th>City</th>
			<th>Something in HTML</th>
		</tr>
	</thead>
	<tbody data-wb-json='{
			"url": "demo/data-en.json#/comments",
			"tobeclone": "tr",
			"queryall": "td",
			"source": "#tblHTMLRender",
			"mapping": [
				"/name",
				"/city",
				{ "value": "/somethingHTML", "isHTML": true }
			]
		}'>
	</tbody>
</table>

<template id="tblHTMLRender">
	<table>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>
</template>

<table class="table">
	<caption>Without the HTML rendering</caption>
	<thead>
		<tr>
			<th>Name</th>
			<th>City</th>
			<th>Something in HTML</th>
		</tr>
	</thead>
	<tbody data-wb-json='{
			"url": "demo/data-en.json#/comments",
			"tobeclone": "tr",
			"queryall": "td",
			"source": "#tblHTMLRender2",
			"mapping": [
				"/name",
				"/city",
				"/somethingHTML"
			]
		}'>
	</tbody>
</table>

<template id="tblHTMLRender2">
	<table>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>
</template>

Render JSON having null values

With the HTML rendering

: N/A

Without the HTML rendering

: N/A

Source code

<div class="row">
	<div class="col-md-6">
		<span class="text-muted">With the HTML rendering</span>
		<dl class="dl-horizontal" data-wb-json='{
				"url": "demo/data-en.json#/withNullAndHtml",
				"mapping": [
					{ "selector": "dt", "value": "/name" },
					{ "selector": "dd", "value": "/prop", "isHTML": true }
				]
			}'>
			<template>
				<dt></dt>
				<dd>N/A</dd>
			</template>
		</dl>
	</div>
	<div class="col-md-6">
		<span class="text-muted">Without the HTML rendering</span>
		<dl class="dl-horizontal" data-wb-json='{
				"url": "demo/data-en.json#/withNullAndHtml",
				"mapping": [
					{ "selector": "dt", "value": "/name" },
					{ "selector": "dd", "value": "/prop" }
				]
			}'>
			<template>
				<dt></dt>
				<dd>N/A</dd>
			</template>
		</dl>
	</div>
</div>

Sub template

Source code

<div class="row" data-wb-json='{
		"url": "demo/data-en.json#/comments",
		"mapping": [
			{ "selector": "h3", "value": "/name" },
			{ "selector": ":nth-child(2)", "value": "/city", "placeholder": "[[city]]" },
			{ "selector": ":nth-child(3)", "value": "/somethingHTML", "isHTML": true },

			{ "selector": "ul[data-object]", "value": "/language",
				"source": "#externalSubTemplateExample",
				"mapping": [
					{ "selector": "[data-language]", "value": "/@id" },
					{ "selector": "[data-test-undefined-override]", "value": "/test_undefined_override" },
					{ "selector": "[data-about]", "value": "/about" },
					{ "selector": "[data-about]", "value": "/@id", "attr": "lang" }
				]
			},

			{ "selector": "ul[data-array]", "value": "/hobby", "queryall": "li" }

		]
	}'>
	<template>
		<div class="col-md-6">
			<h3></h3> <!-- Name -->
			<p>From: [[city]]</p>
			<p></p> <!-- Description -->
			<!-- Sub-template (iterate object) -->
			<p>About:</p>
			<ul data-object>
			</ul>
			<h4>Hobby:</h4>
			<ul class="lst-spcd" data-array> <!-- Sub-template (iterate array) -->
				<template>
					<li></li>
				</template>
			</ul>
		</div>
	</template>
	<template id="externalSubTemplateExample">
		<li>(<span data-language></span>) <span data-about lang></span><span data-test-undefined-override>.</span></li>
	</template>
</div>

Iterate from a JSON Object

When iterating a JSON object it get transformed into an array of objects by following a JSON-LD extended form style. You will find in the data-JSON documentation sample of JSON object before and after it's transformation into an array.

Source code

<ul class="lst-spcd" data-wb-json='{
		"url": "demo/data-en.json#/anArray/2",
		"queryall": "li",
		"mapping": "/@value"
	}'>
	<template>
		<li></li>
	</template>
</ul>

Table

Note: When you are using the templating to feed table rows, there is an issue when the <template> element are located inside the table element only when using IE. The workaround is to move the <template> outside the <table>, ideally next to it, and then to include a <table> inside the <template> followed by your templated row. Then simply configure tobeclone and source to connect data json with the template.

Name	Number	Street	City

Modifying attribute and place holder
Name	Number	Street	City
Place du centre	200	Promenade du Portage	Gatineau
Jean Edmonds, South Tower	365	Laurier Ave W	Ottawa

Binding with the data table plugin `wb-tables`
Name	Street Address	Email

Source code

<table class="table">
	<thead>
		<tr>
			<th>Name</th>
			<th>Number</th>
			<th>Street</th>
			<th>City</th>
		</tr>
	</thead>
	<tbody data-wb-json='{
			"url": "demo/data-en.json#/offices",
			"tobeclone": "tr",
			"queryall": "td",
			"source": "#tbl1",
			"mapping": [
				"/name",
				"/num",
				"/street",
				"/city"
			]
		}'>
	</tbody>
</table>

<template id="tbl1">
	<table>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>
</template>

<table class="table">
	<caption>Modifying attribute and place holder</caption>
	<thead>
		<tr>
			<th>Name</th>
			<th>Number</th>
			<th>Street</th>
			<th>City</th>
		</tr>
	</thead>
	<tbody data-wb-json='{
		"url": "demo/data-en.json#/offices",
		"source": "#tbl2",
		"tobeclone": "tr",
		"mapping": [
			{ "selector": "td", "value": "/name", "placeholder": "[[name]]" },
			{ "selector": "td:nth-child(2)", "value": "/css", "attr": "class" },
			{ "selector": "td:nth-child(2)", "value": "/num" },
			{ "selector": "td:nth-last-child(2)", "value": "/street" },
			{ "selector": "td:last-child", "value": "/city" }
		]
	}'>
		<tr>
			<td>Place du centre</td>
			<td>200</td>
			<td>Promenade du Portage</td>
			<td>Gatineau</td>
		</tr>
		<tr>
			<td>Jean Edmonds, South Tower</td>
			<td>365</td>
			<td>Laurier Ave W</td>
			<td>Ottawa</td>
		</tr>
	</tbody>
</table>

<template id="tbl2">
	<table>
		<tr>
			<td>Name is: [[name]]</td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>
</template>

<!-- data-wb-json need to be set on the "table" element -->
<table class="table wb-tables" data-wb-json='{
	"url": "demo/data-en.json#/addressList",
	"source": "#tbl3",
	"mapping": [
		{ "selector": "a", "value": "/name" },
		{ "selector": "a", "value": "/homeUrl", "attr": "href" },
		{ "selector": ".streetAdress", "value": "/num", "placeholder": "[[num]]" },
		{ "selector": ".streetAdress", "value": "/street", "placeholder": "[[street]]" },
		{ "selector": ".streetAdress", "value": "/city", "placeholder": "[[city]]" },
		{ "selector": ".streetAdress", "value": "/postalCode", "placeholder": "[[pcode]]" },
		{ "selector": ".email", "value": "/email", "attr": "href", "placeholder": "emailAddress@example.com" },
		{ "selector": ".email", "value": "/email" }
	]
}'>

	<caption>Binding with the data table plugin <code>wb-tables</code></caption>
	<thead>
		<tr>
			<th>Name</th>
			<th>Street Address</th>
			<th>Email</th>
		</tr>
	</thead>
	<tbody></tbody>
</table>

<template id="tbl3">
	<table>
		<tr>
			<td><a href=""></a></td>
			<td>
				<span class="streetAdress">[[num]] [[street]], [[city]], [[pcode]]</span>
			</td>
			<td><a class="email" href="mailto:emailAddress@example.com">emailAddress</a></td>
		</tr>
	</table>
</template>

Filtering

Deprecated Would still work, but we recommend to use the JSON manager instead.

Source code for reference only

<p>If <strong>positive<strong> condition:</p>
<ul data-wb-json='{
		"url": "demo/data-en.json#/anArray",
		"queryall": "li",
		"mapping": [
			"/name"
		],
		"filter": [
			{ "path": "/prop", "value": "blue" }
		]

	}'>
	<template>
		<li></li>
	</template>
</ul>

<p>If <strong>negative</strong> condition:</p>
<ul data-wb-json='{
		"url": "demo/data-en.json#/anArray",
		"queryall": "li",
		"mapping": [
			"/name"
		],
		"filternot": [
			{ "path": "/prop", "value": "blue" }
		]

	}'>
	<template>
		<li></li>
	</template>
</ul>

<p>Combinaison of both condition:</p>
<ul data-wb-json='{
		"url": "demo/data-en.json#/anArray",
		"queryall": "li",
		"mapping": [
			"/name"
		],
		"filter": [
			{ "path": "/prop", "value": "yellow", "optional": true },
			{ "path": "/prop", "value": "blue", "optional": true }
		],
		"filternot": [
			{ "path": "/prop", "value": "blue" }
		]

	}'>
	<template>
		<li></li>
	</template>
</ul>

Use `template` placeholder for appending to an element

(To see this working example, take a look at the title element on this page)

<template id="metadatacontent"  data-wb-json='{
		"url": "data-en.json#/product",
		"appendto": "title",
		"source": "#metadatacontent",
		"mapping": [
			{ "placeholder": "[[great]]" }
		]
	}'> *** [[great]] ***</template>

Layout a RSS feeds

The following RSS feeds is provided through the Yahoo YQL Web Service URLs. The direct link to the rss feed is: https://www.tc.gc.ca/mediaroom/rss/road.xml

Source code

<div data-wb-json='{
		"url": "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20feed%20where%20url%20%3D%20&#39;https%3A%2F%2Fwww.tc.gc.ca%2Fmediaroom%2Frss%2Froad.xml&#39;%20limit%2019&amp;format=json#/query/results/item",
		"mapping": [
			{ "selector": "h3", "value": "/title", "placeholder": "" },
			{ "selector": "a", "value": "/description" },
			{ "selector": "a", "value": "/link", "attr": "href" },
			{ "selector": "span", "value": "/pubDate", "placeholder": "[[pubdate]]" }
		]
	}'>

	<template>
		<h3></h3>
		<p><span>Publish on [[pubdate]]</span> <a href=""></a></p>
	</template>
</div>

Importing JSON file via references

Example of importing JSON file via references

Failure to load a JSON file

Example of failing to load a JSON file

Page details

Date modified:: 2022-10-12

Language selection

Search

Template HTML 5

List

Render JSON value as HTML

Render JSON having null values

Sub template

Hobby:

Iterate from a JSON Object

Table

Filtering

Use `template` placeholder for appending to an element

Layout a RSS feeds

Importing JSON file via references

Failure to load a JSON file

Page details

Template HTML 5

List

Render JSON value as HTML

Render JSON having null values

Sub template

Hobby:

Iterate from a JSON Object

Table

Filtering

Use template placeholder for appending to an element

Layout a RSS feeds

Importing JSON file via references

Failure to load a JSON file

Page details

Use `template` placeholder for appending to an element