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: 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>

Page details

Report a problem on this page

Date modified:: 2017-01-31

Template HTML 5

List

Render JSON value as HTML

Sub template

Hobby:

Iterate from a JSON Object

Table

Filtering

Use template placeholder for appending to an element

Layout a RSS feeds

Page details

Use `template` placeholder for appending to an element