Tutorial 4
In this tutorial, we'll show you a smarter, faster way of embedding Phish.net setlists into a website using javascript. For this tutorial, I'll be employing API v3's setlists.latest method.
The simplest way to use the javascript API is detailed in Tutorial 1, but it's not the best way. The problem with the standard method is that it is rendered inline, which means that if there's a delay reaching phish.net, the rest of the page will pause as it waits. When the data is returned, it will reflow and drop the rest of the data in. This is not desirable for a number of reasons, but mostly if you're embedding the setlist near the top of the page, where your content can be needlessly delayed. We're going to fix that with the following script(s). Let's start by pretending we're trying to insert the latest setlist into a div called "setlist."
<div id="setlist"></div>
If you have jQuery installed
Just before you close your </body> tag, let's add this:
<script type="text/javascript">
$.getJSON('https://api.phish.net/v3/setlists/latest/?apikey=<APIKEY>&callback=?',
function callback(json) {
$('#setlist').append("<div id=\"pnetsetlist\">");
for(i=0;i<json.response.data.length;i++) {
var n = json.response.data[i];
$('#setlist').append("<h3>"+n.short_date+" <a href=\"http://phish.net/setlists/"+n.permalink+".html\">"+n.venue+"</a></h3><p class='pnetsl'>"+n.setlistdata+"</p>");
if(n.setlistnotes.replace(/^\s+|\s+$/g,"")!='') { ('#setlist').append("<p class='pnetsn' style=\"font-size:10px;\">" + n.setlistnotes + "</p>"); }
}
$('#setlist').append("</div>");
}
);
</script>
Or, if you're not using jQuery, you can do it this way
<script type="text/javascript">
function pnet(json) {
document.getElementById('setlist').innerHTML +="<div id=\"pnetsetlist\">";
for(i=0;i<json.response.data.length;i++) {
var n = json.response.data[i];
document.getElementById('setlist').innerHTML += "<h3>"+n.short_date+" <a href=\"http://phish.net/setlists/"+n.permalink+".html\">"+n.venue+"</a></h3><p class='pnetsl'>"+n.setlistdata+"</p>";
if(n.setlistnotes.replace(/^\s+|\s+$/g,"")!='') { document.getElementById('setlist').innerHTML += "<p class='pnetsn' style=\"font-size:10px;\">" + n.setlistnotes + "</p>"; }
}
document.getElementById('setlist').innerHTML +="</div>";
}
</script>
<script type="text/javascript" src="https://api.phish.net/v3/setlists/latest/?apikey=<APIKEY>&callback=pnet"></script>">
So what's happening here?
Instead of calling the code as we flow through rendering the page, we're calling it later and backfilling it into an already rendered page. In other words, we're telling javascript to add the data into a div called "setlist". We're using JSONP here, which allows you to call a script from a remote server, something standard javascript AJAX requests can't do because of the same origin policy. This, however, lets us retrieve the JSON from Phish.net, parse it, and backfill it after the document has already rendered, speeding up the page load.
Note that the second argument to "getJSON" (in the JQuery example) is a function. It's the same function as the bundled Phish.net setlist callback, except instead of writing it via "document.write", we're appending it to the "setlist" div.
Phish.net
The Mockingbird Foundation