Language selection

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": "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
Without the HTML rendering
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: