Sunlight Labs API Test

Reference: [sunlightlabs] JSONP problem http://groups.google.com/group/sunlightlabs/browse_thread/thread/93248595e98a64d0

by dandiebolt

HTML

<script src="https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.min.js"></script>
<h4><center>Some JSON testing</center></h4>

APIKEY: <input id="apikey" type="text" style="width:80%" name="apikey" value="4881f4aa3ba849a08db01dc65863ccb6"/><br/><br/>
<input id="test" type="button" style="width:90px;"  name="test" value="Test" />
<hr/>

<script id="template" type="text/x-jquery-tmpl">
    <b>Amendment ID: ${amendment_id}</b><br/>
    Sponsor: <a href="http://bioguide.congress.gov/scripts/biodisplay.pl?index=${sponsor_id}" target="_blank">
    ${sponsor.title} ${sponsor.first_name} ${sponsor.last_name}</a>
    (${sponsor.party}-${sponsor.state})<br/>
    <hr/>
</script>

<div id="info"></div>

JavaScript

var basepath = "http://services.sunlightlabs.com/api/legislators.getList"; 

function callback(data, textStatus, jqXHR) {
    alert("callback");
    console.log(data.response.legislators);
}

$("#test").click(function(){
    var url =basepath  + "?apikey=" + $("#apikey").val() + "&jsonp=callback";
    console.log("apikey=" + $("#apikey").val());
    console.log("url=" + url);
    
    $.ajax({
        url: url,
        dataType: 'json',
        success: callback(data, textStatus, jqXHR)  
    });    
    
    //$.getJSON(url,function(data){
    //    console.log(data.response.legislators);
    //    //$("#template").tmpl(data.amendments).appendTo("#info");   
    //});
    
});