Skip to content


Subversion checkout URL

You can clone with
Download ZIP
API mashup engine ( + Mustache + JQuery)
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.


API Masher

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

This project uses:

  • : A node-based data mashup engine to query that API data sources.
  • JQuery : For making the cross-domain requests via JavaScript to
  • 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=""></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=‘{{}}’ width=‘{{}}’ height=‘{{}}’ /></a><br /><span class=‘small’><a href=‘{{link}}’ target=‘_blank’>{{title}}</a></span></li>”;
var query = “create table slideshare on select get from ‘{user}’ resultset ‘’; 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 on select get from “{q}&rpp={rpp}&include_entities={entities}&result_type={result_type}” using defaults rpp=“10”, entities=“true”, result_type=“mixed”; select results from where q = “jcleblanc”;’;
insertEl = ‘widgetContainer2’;
parser.push(query, format, insertEl);

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

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

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

var query = "create table slideshare on select get from '{user}' resultset ''; 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.


Something went wrong with that request. Please try again.