What Is JSonduit.com?
Any data, anywhere.
JSonduit is a service that can turn practically anything on the web into a JSON feed that any website or mobile app can consume. A JSON conduit, if you will.
Feeds are created from one or more source URLs and a custom transform, written in JavaScript, that can manipulate the data before the feed is served.
JSonduit also provides a hosting service for web widgets so that any site can easily display JSonduit feeds. In fact, the recent/popular lists you see below are widgets served by the JSonduit service; all done in a couple of lines of JavaScript (go ahead, view the page source!).
Example Feed
Summary
The HTML from a Stack Overflow page, which contains of a list of user submitted questions, is scanned for tags with the class "question-summary". Matched tags are then scraped for the title and url of each question, which are then appended to the "results" array.
Url
Transform Code
var result = [];
var questionContainer = getElementById("questions", data[0]);
getElements({ class: "question-summary" }, questionContainer).forEach(function (item, index, list) {
var question = getElementsByTagName("h3", item)[0];
result.push({
url: "http://stackoverflow.com" + question.children[0].attribs.href
, title: question.children[0].children[0].data
});
});
saveResult(result);
JSON Output
{View the feed details
"error":null,
"result":[{
"url":"http://stackoverflow.com/questions/3031957/ajax-add-new-div-from-json-with-jquery",
"title":"Ajax: Add new <div> from JSON with jQuery"
},
...
]
}
Example Widget
Summary
This widget takes the example feed and turns it into an unordered list with a title.
Feed
Template
<div>
<div style="font-weight:bold;">Example Feed</div>
<ul>
<% data.forEach(function (item, index, list) {
%><li><a href="<%= item.url %>"><%= item.title %></a></li><%
}); %>
</ul>
</div>
Compiled Template
function anonymous(data) {View the widget details
var __output = [];
var print = function () {
__output.push.apply(__output, arguments);
};
print("<div>\n\t<div style=\"font-weight:bold;\">Example Feed</div>\n\t<ul>\n");
data.forEach(function (item, index, list) {
print("<li><a href=\"");
print( item.url );
print("\">");
print( item.title );
print("</a></li>");
}); print("\n\t</ul>\n</div>");
return(__output.join(''));
}
Put a Widget on Your Website
Including the JSonduit JS Library
The JS include is typically included inside the <head> tag of the web page but it can be added anywhere that is convenient for you (don't worry, it is really small at only 1.5K).
<script language="JavaScript" type="application/javascript" src="http://jsonduit.com/js/tools.min.js"> </script>
Providing a Place for the Widget to Appear
The widget needs a place to be inserted. The most common target is a <div> tag with an ID attribute, which makes the div easy to identify.
<div id="widgetTarget"></div>
Loading the Widget and Feed
Loading a widget and its feed is as simple as calling a single function. The easiest way to do this is hook into the onLoad event of the <body> tag.
<body onload="JSonduit.widget.load('7q2', 'widgetTarget');">
The first argument to JSonduit.widget.load() is the ID of the widget to display (7q2) and the second argument is the ID of the HTML element to insert the widget into (widgetTarget).
Putting it All Together
Here is a miminal page showing all the pieces necessary to load a widget onto a page.
<html>
<head>
<script language="JavaScript" type="application/javascript" src="http://jsonduit.com/js/tools.min.js"> </script>
</head>
<body onload="JSonduit.widget.load('7q2', 'widgetTarget');">
<div id="widgetTarget"></div>
</body>
</html>