Template

Convert Array of JSON objects into a HTML structure, a new Array of JSON objects or a plain string, using a template.

IE 6-9 does not support table.innerHTML, so temlating with tables, require the passed template to be string as it won't work with a DOM node. This partial support is acceptable as full TABLE/TR support will impact overall performance to severely.

Functions

Util.template

Definition

Name
Util.template
Syntax
Nodelist | Array | JSON = Util.template( Node|String|JSON template , JSON json [, JSON _options ] );

Description

If HTML (node or string) is passed as template, it creates HTML nodes from json based on template.

If JSON (Object or string) is passed as template, it creates new Array of JSON Objects from json based on template.

If plain String is passed as template, it creates a combined string, with the values from json.

If json contains values of type Object, Number, Boolean or null, these maintain the same type only when template is also JSON. If template is HTML, HTML string or plain string, these types will naturally be returned as a text-representation. In this case null becomes an emptry string.

Parameters

template
Node HTML node to be used as template.
template
StringText, HTML or JSON string to be used as template.
template
JSON JSON object to be used as template.
json
JSON JSON object or Array of JSON objects to use as values.
_options
JSON Optional options for parsing
Options
append
Node to append results to

Returns

ChildNodes|Array|String

If HTML is passed as template it returns list of created nodes as ChildNodes reference or Array of nodes if the append option is used to append nodes automatically.

If JSON is passed as template it returns an Array of JSON Objects.

If String is passed as template, a combined String is returned.

If json contains values of type Object, Number, Boolean or null, these maintain the same type only when template is also JSON. If template is HTML, HTML string or plain string, these types will naturally be returned as a text-representation. In this case null becomes an emptry string.

Examples

HTML templating, Simplest usage
<ul> <li class="template"> <h3>{name}</h3> <p>{description}</p> <a href="{url}">link</a> </li> </ul> <script> var data = [ { "name":"Manipulator", "description":"JavaScript framework", "url":"http://manipulator.parentnode.dk" }, { "name":"Detector", "description":"Device detection" "url":"http://detector.parentnode.dk" } ]; var template = u.qs("li.template"); var nodes = u.template(template, data); </script>

Returns nodeList with 2 html nodes, shown below:

<li> <h3>Manipulator</h3> <p>JavaScript framework</p> <a href="http://manipulator.parentnode.dk">link</a> </li> <li> <h3>Detector</h3> <p>Device detection</p> <a href="http://detector.parentnode.dk">link</a> </li>
With automatic appending
<ul> <li class="template"> <h3>{name}</h3> <p>{description}</p> <a href="{url}">link</a> </li> </ul> <script> var data = [ { "name":"Manipulator", "description":"JavaScript framework", "url":"http://manipulator.parentnode.dk" }, { "name":"Detector", "description":"Device detection" "url":"http://detector.parentnode.dk" } ]; var list = u.qs("ul"); var template = u.qs("li.template"); var nodes = u.template(template, data, {"append":list}); </script>

Adds two new nodes to the UL, making the ul look like:

<ul> <li class="template"> <h3>{name}</h3> <p>{description}</p> <a href="{url}">link</a> </li> <li> <h3>Manipulator</h3> <p>JavaScript framework</p> <a href="http://manipulator.parentnode.dk">link</a> </li> <li> <h3>Detector</h3> <p>Device detection</p> <a href="http://detector.parentnode.dk">link</a> </li> </ul>
JSON conversion
var template = { "name":"{res1}", "description":"{res2}", "url":"{res3}" "saved":"{res4}" }; var data = [ { "res1":"Manipulator", "res2":"JavaScript framework", "res3":"http://manipulator.parentnode.dk" "res4":true, "meta":{ "key":"{1231-BFED-12312-21231}", "signature":"Xew-12345" }, }, { "res1":"Detector", "res2":"Device detection" "res3":"http://detector.parentnode.dk" "res4":false, "meta":{ "key":"{1231-BFED-12312-21231}", "signature":"Xew-12345" }, } ]; var new_json = u.template(template, data);

Returns lean JSON object with custom keys:

[ { "name":"Manipulator", "description":"JavaScript framework", "url":"http://manipulator.parentnode.dk", "saved":true }, { "name":"Detector", "description":"Device detection" "url":"http://detector.parentnode.dk", "saved":false } ];

Uses

JavaScript
  • switch ... case
  • document.createElement
  • Node.cloneNode
  • Node.appendChild
  • decodeURIComponent
  • String.replace
  • String.toLowerCase
  • Array.push
Manipulator
  • None

Files

Main file

  • u-template.js

Segment support files

  • none

Segment dependencies

desktop_edge
u-template.js
desktop_ie11
u-template.js
desktop
u-template.js
desktop_ie10
u-template.js
desktop_ie9
u-template.js
desktop_light
u-template.js
tablet
u-template.js
tablet_light
u-template.js
smartphone
u-template.js
mobile
not tested
mobile_light
not supported
tv
u-template.js
seo
not supported