{"id":1118,"date":"2014-11-04T15:00:27","date_gmt":"2014-11-04T13:00:27","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=1118"},"modified":"2014-11-01T09:46:40","modified_gmt":"2014-11-01T07:46:40","slug":"templating-in-javascript","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/templating-in-javascript\/","title":{"rendered":"Templating in Javascript"},"content":{"rendered":"

In the last few weeks I was doing some work with client side templates. Since most of the webbies seemed to be unfamiliar with the concept and had a wee bit of bother wrapping their heads around it, here\u2019s a short explanation of the whole idea.<\/p>\n

Code for this post can be downloaded here<\/a> or seen here<\/a>.<\/p>\n

Formatting output with javascript<\/h2>\n

In most (all?) web applications, you\u2019re going to have to display some formatted data at some point. It could be as simple as a personalized greeting, or as complex as a dynamic chart with bells and whistles. Doesn\u2019t matter \u2013 at the core, you\u2019re still going to have to convert your data object into some kind of html.<\/p>\n

The time honoured \u2013 and wrong \u2013 way to do this is to concatenate strings together using the + operator. You know, like<\/p>\n

$('#greeting').html('Hello ' + user.name+'!');<\/pre>\n
That looks innocuous enough, but it can quickly get complex \u2013 suppose you need to include more variables in there, or simply make it localizable \u2013 the placement of words does not follow the same order in every language, so you\u2019d need a different pattern per language. In my experience, most translators are not technical people, so having them translate the expressions is really not a great idea. The concatenated string is also more difficult for you to read, so if you have to make any changes, or end up with a really long chain of text, you\u2019re in for a headache. Add in conditions, collections, and other fun stuff, and it\u2019s really a pain.<\/p>\n
How not to go nuts<\/h2>\n
Most javascript frameworks provide some sort of templating engine, either built-in or as a plugin. For this example I\u2019m going to use Mustache<\/a>, because it supports some spiffy features which others don\u2019t. The concepts, however, remain pretty much the same, with the exception of the syntax.<\/p>\n
Defining a template<\/h2>\n
The most common way of defining a template is to use a script tag. By giving it a type of \u201ctext\/template\u201d (some engines use different types, but it shouldn\u2019t make too much of a difference), you tell the browser that it shouldn\u2019t consider the contents of the script tag as javascript, so it won\u2019t try to run it and go boom. In fact, it will quietly ignore the element, allowing you to define your template inside, for example:<\/p>\n
<script type='text\/template' id='article'>\r\n    <article data-key='{{id}}' data-permalink='{{permalink}}'>\r\n        <h1>{{title}}<\/h1>\r\n        <h2>by {{author.firstName}} {{author.lastName}}<\/h2>\r\n        <section class='summary'>{{summary}}<\/section>\r\n        <section class='content'>\r\n            {{content}}\r\n        <\/section>\r\n    <\/article>\r\n<\/script><\/pre>\n
as you can see, \u00a0it looks just like normal, plain html \u2013 the equivalent as a concatenation would be:<\/p>\n
'<article data-key=\\'' +id + '\\' data-permalink=\\'' + permalink + '\\'><h1>' + title + '<\/h1><h2>by ' + author.firstName + ' ' + author.lastName + '<\/h2><section>' + summary + '<\/section><section>' + content + '<\/section><\/article>'<\/pre>\n
When you want to use the template, you can get the contents of the script element, and use them. Mustache lets you use it right away; other templating systems might require you to create a template instance first, so check your chosen system\u2019s documentation.<\/p>\n
To get the template source, you can use any method of accessing the element\u2019s content, whether it\u2019s jQuery\u2019s .html()<\/a> function or the standard js innerHTML<\/a> field. You can then feed this, along with your data to your templating engine. In our case we\u2019re going to use a simple object:<\/p>\n
var data = {\r\n    id: 0,\r\n    permalink:'http:\/\/xyz.com\/0',\r\n    title:'Ender's Game',\r\n    author:{ firstName:'Orson Scott', lastName:'Card'},\r\n    summary: 'Some random text here',\r\n    content: 'A bit more information here.'\r\n}<\/pre>\n
so by feeding this into the template:<\/p>\n
var formattedData = Mustache.to_html($('#article').html(), data);<\/pre>\n
We get a nice string which we can then put anywhere in our document:<\/p>\n
<article data-key='0' data-permalink='http:\/\/xyz.com\/0'>\r\n    <h1>Ender's Game<\/h1>\r\n    <h2>by Orson Scott Card<\/h2>\r\n    <section class='summary'>Some random text here<\/section>\r\n    <section class='content'>\r\n        A bit more information here.\r\n    <\/section>\r\n<\/article><\/pre>\n
Here you can see that all the placeholders have been replaced with the values from the data object. Mustache is clever enough to use nested objects too, as in the case of the author field; you can access properties inside a child object like you would in plain js.<\/p>\n
Another handy feature<\/h2>\n
Apart from handling nested objects, Mustache can also handle nested collections. This is obviously handy as applications almost always have to deal with collections of things.\u00a0We just need to tell Mustache that a placeholder is for a collection by prefixing the placeholder with a #, and define a subtemplate for it, like so:<\/p>\n
<aside class='related'>\r\n    <h2>Related articles<\/h2>\r\n    {{#related}}\r\n    <article data-key='{{id}}' data-permalink='{{permalink}}'>\r\n        <h1>{{title}}<\/h1>\r\n        <h2>by {{author.firstName}} {{author.lastName}}<\/h2>\r\n    <\/article>\r\n    {{\/related}}\r\n<\/aside><\/pre>\n
Using the data:<\/p>\n
var data = {\r\n...\r\n    related:[\r\n        { id: 1, permalink: 'http:\/\/xyz.com\/1', title: 'Speaker for the dead', author:{ firstName:'Orson Scott', lastName:'Card'}},\r\n        { id: 2, permalink: 'http:\/\/xyz.com\/2', title: 'The Fires of Heaven', author:{ firstName:'Robert', lastName:'Jordan'}}\r\n    ]\r\n}<\/pre>\n
We get<\/p>\n
<aside class='related'>\r\n    <h2>Related articles<\/h2>\r\n    <article data-permalink='http:\/\/xyz.com\/1' data-key='1'>\r\n        <h1>Speaker for the dead<\/h1>\r\n        <h2>by Orson Scott Card<\/h2>\r\n    <\/article>\r\n    <article data-permalink='http:\/\/xyz.com\/2' data-key='2'>\r\n        <h1>The Fires of Heaven<\/h1>\r\n        <h2>by Robert Jordan<\/h2>\r\n    <\/article>\r\n<\/aside><\/pre>\n
Not all template engines provide this kind of support, but it\u2019s generally easy to work around it by templating while iterating a collection and appending to a placeholder.<\/p>\n
Some gotchas<\/h2>\n
The template syntax might not be appreciated by the server side language you are using in some cases \u2013 for example, JSPs don\u2019t like the Prototype template syntax. You may be able to customize or configure your templating engine to work around this if necessary.<\/p>\n
One thing to keep in mind is the difference between the template source, the template instance (if there is one) and the templated data \u2013 I\u2019ve seen a few people try to use the template itself as output, which won\u2019t work. So: The template source is the markup with the placeholders that we defined earlier. The template instance is something which will take our data and our template source and put them together, and finally, templated data is the final product we want to use, with the values in place. An example which sounds like I pulled it out my butt (because that\u2019s exactly what happened), but somehow helped some people remember, is this: the output is a cookie; the template is a cookie shaper, and the template source is the design of the shaper. Remember which one you want to eat.<\/p>\n
Closing off<\/h2>\n
If you didn\u2019t already use templates, give them a try for your own sake. They\u2019re much, much easier to handle than concatenations.<\/p>\n
\u201cAnd if you do not listen, then the hell with you!\u201d<\/em><\/p>\n
-Conan The Barbarian<\/em><\/p>\n
\n\n\n\n
Reference: <\/span><\/td>\nTemplating in Javascript<\/a> from our WCG partner<\/a> Karl Agius at the The Simple Part<\/a> blog.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
In the last few weeks I was doing some work with client side templates. Since most of the webbies seemed to be unfamiliar with the concept and had a wee bit of bother wrapping their heads around it, here\u2019s a short explanation of the whole idea. Code for this post can be downloaded here or …<\/p>\n","protected":false},"author":12,"featured_media":920,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-1118","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"yoast_head":"\nTemplating in Javascript - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"In the last few weeks I was doing some work with client side templates. Since most of the webbies seemed to be unfamiliar with the concept and had a wee\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/templating-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Templating in Javascript - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"In the last few weeks I was doing some work with client side templates. Since most of the webbies seemed to be unfamiliar with the concept and had a wee\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/templating-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2014-11-04T13:00:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Karl Agius\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Karl Agius\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/templating-in-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/templating-in-javascript\/\"},\"author\":{\"name\":\"Karl Agius\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/35cf457f6419a5237d6bd53ebd555a71\"},\"headline\":\"Templating in Javascript\",\"datePublished\":\"2014-11-04T13:00:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/templating-in-javascript\/\"},\"wordCount\":1292,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/templating-in-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/templating-in-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/templating-in-javascript\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/templating-in-javascript\/\",\"name\":\"Templating in Javascript - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/templating-in-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/templating-in-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"datePublished\":\"2014-11-04T13:00:27+00:00\",\"description\":\"In the last few weeks I was doing some work with client side templates. Since most of the webbies seemed to be unfamiliar with the concept and had a wee\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/templating-in-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/templating-in-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/templating-in-javascript\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/templating-in-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Templating in Javascript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/35cf457f6419a5237d6bd53ebd555a71\",\"name\":\"Karl Agius\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/85f927d2a11fcd5b86cd2332b2f0e242fa4b752ffe35b8797ea23def50a39b30?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/85f927d2a11fcd5b86cd2332b2f0e242fa4b752ffe35b8797ea23def50a39b30?s=96&d=mm&r=g\",\"caption\":\"Karl Agius\"},\"sameAs\":[\"http:\/\/karlagius.com\/\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/karl-agius\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Templating in Javascript - Web Code Geeks - 2026","description":"In the last few weeks I was doing some work with client side templates. Since most of the webbies seemed to be unfamiliar with the concept and had a wee","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/javascript\/templating-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Templating in Javascript - Web Code Geeks - 2026","og_description":"In the last few weeks I was doing some work with client side templates. Since most of the webbies seemed to be unfamiliar with the concept and had a wee","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/templating-in-javascript\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2014-11-04T13:00:27+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","type":"image\/jpeg"}],"author":"Karl Agius","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Karl Agius","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/templating-in-javascript\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/templating-in-javascript\/"},"author":{"name":"Karl Agius","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/35cf457f6419a5237d6bd53ebd555a71"},"headline":"Templating in Javascript","datePublished":"2014-11-04T13:00:27+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/templating-in-javascript\/"},"wordCount":1292,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/templating-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/templating-in-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/templating-in-javascript\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/templating-in-javascript\/","name":"Templating in Javascript - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/templating-in-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/templating-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","datePublished":"2014-11-04T13:00:27+00:00","description":"In the last few weeks I was doing some work with client side templates. Since most of the webbies seemed to be unfamiliar with the concept and had a wee","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/templating-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/templating-in-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/templating-in-javascript\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/templating-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"Templating in Javascript"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/35cf457f6419a5237d6bd53ebd555a71","name":"Karl Agius","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/85f927d2a11fcd5b86cd2332b2f0e242fa4b752ffe35b8797ea23def50a39b30?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/85f927d2a11fcd5b86cd2332b2f0e242fa4b752ffe35b8797ea23def50a39b30?s=96&d=mm&r=g","caption":"Karl Agius"},"sameAs":["http:\/\/karlagius.com\/"],"url":"https:\/\/www.webcodegeeks.com\/author\/karl-agius\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/1118","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=1118"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/1118\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/920"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=1118"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=1118"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=1118"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}