An application program interface (API) is a set of routines, protocols, and tools for building software applications. APIs are used to call and display information (often from a third party) on your website.
RSS (Rich Site Summary) is a format for delivering regularly changing web content. Many news-related sites, weblogs and other online publishers syndicate their content as an RSS Feed to whoever wants it.
RSS solves a problem for people who regularly use the web. It allows you to easily stay informed by retrieving the latest content from the sites you are interested in. You save time by not needing to visit each site individually. You ensure your privacy, by not needing to join each site’s email newsletter. The number of sites offering RSS feeds is growing rapidly and includes big names like Yahoo News.
Yahoo! Query Language (YQL) is an SQL-like query language created by Yahoo! as part of their Developer Network. YQL is designed to retrieve and manipulate data from APIs through a single Web interface, thus allowing mashups that enable developers to create their own applications.
The following API examples all use a YQL query to return a JSON Object (which we can then handle with javascript and jQuery). While we will be covering the fundamentals of YQL syntax, our emphasis will be more with what we can do with the data we’ve received.
We will be using a jQuery library called Query YQL that is built off of YQL (Yahoo! Query Language).
As can be seen on the library’s site, there are various methods of usage (all depending on the type of query you’d like to make). We’ll be using the Query YQL full function:
var statement = "select * from feed where url='http://example.com/rss'";
// here is where you put your url (inside the 'single quotes') This string is actually the YQL syntax
$.queryYQL(statement, "json", undefined, function (data) {
// the query then passes the statement through
// here you can then manipulate your data (returned as an object):
console.log(data)
});
Getting the New York Times Art & Design RSS Feed:
var statement = "select * from feed where url='http://rss.nytimes.com/services/xml/rss/nyt/ArtandDesign.xml'";
// here you link the url you need
$.queryYQL(statement, "json", undefined, function (data) {
//function taken from the query-yql library
$("#times").append("<h1>The New York Time: Art and Design RSS Feed</h1>") //append title of rss feed
for (var i = 0; i < data.query.results.item.length; i++) { // for each result:
console.log(data.query.results.item[i]) // console log the result's object
$("#times").append(`
<h2>${ data.query.results.item[i].title }</h2>
<h3>${ data.query.results.item[i].pubDate }</h3>
<p>${ data.query.results.item[i].description }</p>
`)
}
}
});
Many APIs don’t use RSS feeds. In there stead, you can use $.get().
$.get is a jQuery shorthand for an Ajax function and allows you to call content from a server. It follows the format:
$.get( "ajax/test.html", function( data ) {
$( ".result" ).html( data );
alert( "Load was performed." );
});
Or, more generally $.get( “the url string you’re getting”, function(the returned data){ what you’re doing with the data you’ve gotten})
Pulling our are.na channel:
$.get( "http://api.are.na/v2/channels/f18-web-advanced-potential", function( data ){
console.log(data)
});
A boilerplate for this demo can be found here.
The files we used in-class can be found here.
Take one of the in-class examples (RSS, Are.na, or Open Weather Map), and practice traversing and styling the call’s return.