Trove API example

This example shows how to search using the Trove API

HTML

<div class="container">
    <h1 class="page-header">Trove API Search example</h1>
    
    <div class="form-horizontal">
      <div class="control-group">
        <label class="control-label" for="apiKey">Trove API key</label>
        <div class="controls"> 
          <input id="apiKey" type="text" />
          <span class="help-block">Enter your Trove API key here</span>
        </div>
      </div>

      <div class="control-group">
        <label class="control-label" for="searchTerm">Search Term</label>
        <div class="controls"> 
          <input id="searchTerm" type="text" />
            <span class="help-block">See <a href="http://trove.nla.gov.au/general/api-technical#indexes" target="_blank">Trove API documentation</a> for supported facets</span>
        </div>
      </div>
      <div class="control-group">
          <label class="control-label" for="searchZone">Zone</label>
          <div class="controls">
              <select id="searchZone">
              <option>book</option>
              <option>picture</option>
              <option>article</option>
              <option>music</option>
              <option>map</option>
              <option>collection</option>
              <option>newspaper</option>
              <option>list</option>
            </select>
          </div>              
      </div>
        <div class="control-group">
          <label class="control-label" for="sortBy">Sort By</label>
          <div class="controls">
            <select id="sortBy">
              <option>dateasc</option>
              <option>datedesc</option>
              <option>relevance</option>
            </select>
          </div>              
      </div>
      <div class="control-group">
        <div class="controls">
         <button class="btn" id="searchbtn">Search</button>
        </div>
      </div>
    </div>

    <hr/>
    <ul id="output"></ul>
    <a href="http://trove.nla.gov.au/" target="_blank"><img alt="Powered by Trove"...

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.container {
    margin:5px;
}

JavaScript

// Construct the URL for the Trove Search API
    var url = "http://api.trove.nla.gov.au/result?key=" 
        + apiKey + "&encoding=json&zone=" + searchZone 
        + "&sortby=" + sortBy + "&q=" + "wombat%20animal" + "&callback=?";

    // Get the results as JSON and display
    $.getJSON(url, function(data) {
        var displayJSON = function( index, item ) {

            $('#output').append("<li>" + (index + 1) + ". "                 
              // display link to record
              +"<a target='_blank' href='" + item.troveUrl +"'>"
              + (item.title.value || item.title || item.name)
              + "</a><br/>"
                                
              // display JSON response (formatted)
              + "<pre>" + JSON.stringify(item,null,4) + "</pre>"
              + "</li>");
           
        };
        $('#output').empty();
        if (data.response.zone[0].records.work){
            $.each(data.response.zone[0].records.work, displayJSON);
        } else if (data.response.zone[0].records.article){
            $.each(data.response.zone[0].records.article, displayJSON);
        } else if (data.response.zone[0].records.list){
            $.each(data.response.zone[0].records.list, displayJSON);
        }
    });
});