jcleblanc / api-masher

API mashup engine (ql.io + Mustache + JQuery)

API Masher

The API Masher is a JavaScript include that allows you to display web-based API data sets easily.

This project uses:

• ql.io : A node-based data mashup engine to query that API data sources.
• JQuery : For making the cross-domain requests via JavaScript to ql.io.
• Mustache Templates : For rendering the formatted content.

Using API Masher

To begin using API Masher, simply include script source includes to JQuery, the mustache library, and the parser.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="mustache.js"></script>
<script src="parser.js"></script>

Now you can begin integrating API data easily into your sites using the format below:

<div id=“widgetContainer”></div>

<div id=“widgetContainer2”></div>

<script type=“text/javascript”>

var format = “<li><a href=‘{{link}}’ target=‘_blank’><img src=‘{{media:content.media:thumbnail.url}}’ width=‘{{media:content.media:thumbnail.width}}’ height=‘{{media:content.media:thumbnail.height}}’ /></a><br /><span class=‘small’><a href=‘{{link}}’ target=‘_blank’>{{title}}</a></span></li>”;

var query = “create table slideshare on select get from ‘http://www.slideshare.net/rss/user/{user}’ resultset ‘rss.channel’; select item0, item1, item2, item3, item4, item5 from slideshare where user=‘jcleblanc’”;

var insertEl = “widgetContainer”;

parser.push(query, format, insertEl);
format = ‘{{from_user_name}}: {{text}}<br />’;

query = ‘create table twitter.search on select get from “http://search.twitter.com/search.json?q={q}&rpp={rpp}&include_entities={entities}&result_type={result_type}” using defaults rpp=“10”, entities=“true”, result_type=“mixed”; select results from twitter.search where q = “jcleblanc”;’;

insertEl = ‘widgetContainer2’;

parser.push(query, format, insertEl);

parser.render();

</script>

The above sample is integrating formatted data from 2 web sources (Slideshare and Twitter) into their associated div nodes. If we break down a single request, it is composed of the following components:

The HTML node where the web content should be loaded into

<div id="widgetContainer"></div>

The mixed mustache / HTML template laying out how the content should be rendered. Any node in mustache format {{}} should relate to an associated return object from the API request in ql.io

var format = "<li><a href='{{link}}' target='_blank'><img src='{{media:content.media:thumbnail.url}}' width='{{media:content.media:thumbnail.width}}' height='{{media:content.media:thumbnail.height}}' /></a><br /><span class='small'><a href='{{link}}' target='_blank'>{{title}}</a></span></li>";

The ql.io query to be run and whose results relate back to the format above.

var query = "create table slideshare on select get from 'http://www.slideshare.net/rss/user/{user}' resultset 'rss.channel'; select item[0], item[1], item[2], item[3], item[4], item[5] from slideshare where user='jcleblanc'";

The ID of the HTML element to insert the results into.

var insertEl = "widgetContainer";

The request to push the API call onto the stack, passing in the query, format and insert element. You can push multiple requests onto the stack before rendering.

parser.push(query, format, insertEl);

The call to render the API content on the page. This should only be run after all API requests have been pushed onto the stack.

parser.render();