This is a snippet that renders a listing of federal agencies with their logos.
<!-- Begin Federal Agency Listing --->
<!-- Requires - http://mustache.github.io/ to run--->
<!-- {% raw %} and {% endraw %} are only required when using Github pages--->
{% raw %}
<script id="agencyListingTemplate" type="text/template">
<tr>
<td width="100" align="center" valign="middle">
<a href="federal-agencies-detail.html?id={{id}}">
<img src="{{logo}}" width="100" align="center" style="padding: 15px;" />
</a>
</td>
<td valign="middle" align="left">
<a href="federal-agencies-detail.html?id={{id}}" style="color: #000;">
<strong>{{name}}</strong></a>
</a>
</td>
</tr>
</script>
{% endraw %}
<p>
<a id="jsonlink" href="federal-agencies.json" target="_blank">
<img src="https://s3.amazonaws.com/kinlane-productions/bw-icons/bw-json-data-store.png" align="right" width="50" style="padding-top: 10px;" />
</a>
</p>
<h1>Federal Agencies</h1>
<p>This is a list of federal agencies, sorted by their name and with logo. The listing uses the JSON file above for its content.</p>
<table id="agencyListing" style="padding-left: 20px;"></table>
<script type="text/javascript">
function listAgencies()
{
$.getJSON('data/federal-agencies.json', function(data) {
$.each(data['agencies'], function(key, val) {
var template = $('#agencyListingTemplate').html();
var html = Mustache.to_html(template, val);
$('#agencyListing').append(html);
});
});
}
listAgencies();
</script>
<!-- End Federal Agency Listing --->