JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://raw.github.com/marc-portier/uri-templates/master/src/main/js/uritemplates.js"></script>
CSS
div{
margin: 10px;
font-family: monospace;
}
JavaScript
var endpoint = "http://dev-api.dtime.com/";
var home = null;
function load_dtime(rel){
if(home != null){
return $.when(home)
}
else{
home = $.ajax({
url: endpoint
})
return home;
}
}
function find_link(rel, data){
for(link in data._links){
if(link == rel){
return data._links[rel]
}
}
}
function find_href(rel, data, tmpl){
var link, template;
link = find_link(rel, data);
if(link["href-template"]){
template = uritemplate(link["href-template"]);
return template.expand(tmpl);
}else{
return link["href"];
}
}
// Use jquery promise to make sure api is only fetched once,
// and all calls relying on api are delayed until ready.
load_dtime().done(function(data){
// One without a template
$('body').append("<div> Link is: " +JSON.stringify(find_link("dtime:current_user", data))+"</div>");
$('body').append("<div> Href is: " +find_href("dtime:current_user", data, {user_id: 'abc'})+"</div>");
// One with a template
$('body').append("<div> Link is: " +JSON.stringify(find_link("dtime:user", data))+"</div>");
$('body').append("<div> Link is is: " +find_href("dtime:user", data, {user_id: 'abc'})+"</div>");
})