kinlane
4/26/2013 - 7:21 AM

This is a snippet that renders a listing of federal agencies with their logos.

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 --->