How to Build Your Own Lifestream with Yahoo Pipes and NO Server Side Logic
Step 4: Load the Data in Javascript
So, now that you created a nice Pipe it is time to show this data in a nice way without having to use anything like PHP or other server side code (that was the whole point of this article, right?). The simplest way to do this is to take the JavaScript Object Notation (JSON) output of the Pipe and loading this in your HTML. Every pipe has different output possibilities including JSON and they can be found by clicking the “More options” button on the Pipe’s page.
For my lifestream, the JSON url looks something like this:
http://pipes.yahoo.com/pipes/pipe.run?_id=nLJtNct93BGnML4nl7okhQ&_render=json
Unfortunately, you can’t directly load the JSON data from a third party site with Ajax as that would make cross side scripting possible. The solution to this problem is to simply load the JSON in a <script> tag in your <head> like this:
<script type='text/javascript' src='http://pipes.yahoo.com/pipes/pipe.run?_id=nLJtNct93BGnML4nl7okhQ&_render=json&_callback=drawLifeStream'>
As you can see I added a new parameter to the src to provide some kind of callback function. Normally, when you call the JSON link, you will just get a JSON object, which is basically useless, when you add a _callback parameter though, Yahoo Pipes will wrap the entire object into a call to the function you provided to callback. In other words, when I load this script, it will make a call to my own drawLifestream() function with the JSON object as a parameter. Once in the function, you and I can use this JSON data and draw it in the browser screen.
To present the data I used the PrototypeJS and a little bit of the Scriptaculous libraries which I would recommend to anyone who has to do a lot of DOM manipulation.
PrototypeJS proved to be pretty useful too for dynamically loading the Yahoo Pipes JSON output. With the following trick you can load any Yahoo Pipe output, dynamically, without having to load the data in the page header. The effect is much like loading with an Ajax call.
function loadJSON() {
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'http://pipes.yahoo.com/pipes/pipe.run?_id=nLJtNct93BGnML4nl7okhQ&_render=json&_callback=drawLifeStream';
document.getElementsByTagName("head")[0].appendChild(newScript);
}
This PrototypeJS powered function simply adds a new <script> element to the DOM, within the
tag, therefore loading the script dynamically and asynchronously calling the drawLifestream() function as the remote JSON is loaded. The loadJSON() function can be called from a keypress, or whatever event needed to trigger the loading.The cool thing is that the data will remain cached even if you add/remove the script tag, guaranteeing fast response times. Obviously this causes for some caching issues when you don’t want them, but more in the next section.
