Language selection

Government of Canada / Gouvernement du Canada

Search

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": "Jean Edmonds, North Tower", "num": 300, "street": "Slater", "city": "Ottawa", "css": "bg-success" },
		{ "name": "Place du portage, Phase I", "num": 50, "street": "Victoria", "city": "Gatineau", "css": "bg-danger" }
	],
	"comments": {
		"2017-1": {
			"name": "Mr X",
			"city": "Gatineau",
			"somethingHTML": "<strong>Horay</strong> here rich HTML content",
			"hobby": [ "Car", "Mechanic", "Race" ]
		},
		"2017-2": {
			"name": "Mrs Y",
			"city": "St-Pierre",
			"somethingHTML": "<strong>Youpi</strong> word should be with emphasis",
			"hobby": [ "Spa", "Nature", "Bike", "Reading" ]
		}
	}
}

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>

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", "value": "/hobby", "queryall": "li" }
		]
	}'>
	<template>
		<div class="col-md-6">
			<h3></h3> <!-- Name -->
			<p>From: [[city]]</p>
			<p></p> <!-- Description -->
			<h4>Hobby:</h4>
			<ul class="lst-spcd"> <!-- Sub-template container -->
				<template>
					<li></li>
				</template>
			</ul>
		</div>
	</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
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>

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: http://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;http%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>
Report a problem on this page
Please select all that apply:

Thank you for your help!

You will not receive a reply. For enquiries, please contact us.

Date modified: