If you have used Yahoo Pipes, you would have noticed that it’s great at combining feeds, applying operators, filtering etc, but when it comes to showing the data on UI, you’re pretty much left on your own. The “Run Pipe” option does come with some sort of UI, but it’s not useful if you want to customize the view, or more importantly, if you want to use the feed in your application.

One way around it is to use Google Mashups with Yahoo Pipes, as I demonstrated in this post. However, if you don’t want to go that route, there are still ways to get the data dynamically from your pipe (based on user input) and show it in the way you like. This post shows how to achieve that.

I will be using the following Yahoo pipe to demonstrate this. This is what it looks like while running using default option:

This pipe let’s user specify a place/city and area of interest (like restaurants) and extracts relevant information from multiple sources. You can look at the source of this Yahoo pipe here.

Using Yahoo Pipe as a data Source

The approach is based on the following feature of Yahoo pipes - it gives you an option to choose the output format of the feed apart from using the default view that “Run pipe” shows. Have a look at “More Options” drop-down:

It let’s you choose the output format as RSS, Json and more which can be fed back into a parser that can extract data from the pipe.

Another feature that’s worth noting (which does not appear to be well documented, found it here) is that you can include a javascript to run a Yahoo pipe and have it invoke a callback that you provide. So for this pipe here is how you can do this:

<script type="text/javascript">
 src="http://pipes.yahoo.com/pipes/pipe.run?
 _id=DHmqVzt43BG_uaC66kjTQA
 &location=New+York
 &interest=Italian+Restaurant
 &_render=json
 &_callback=onDataLoad"
 >
 </script>

(I have put the parameters on different line for the sake of readability). In the code above, the parameter _render specifies the output format and _callback specifies the javascript method that you implement which will be invoked after pipe has created the output.

In order to show this data, you may start with creating placeholders in your html like this with some default text like “Loading..” that user will see until data comes back from the pipe:

<span id="news"> Loading... </span>
...
<span id="interest"> Loading... </span>
...
<span id="photos"> Loading... </span>

The callback method parses the json as follows. Essentially, it looks at every item in the feed, and depending on the type of the item it constructs html and pushes it into corresponding placeholder:

function pipeCallback(obj){

var locationInfo = "";
var interestInfo = "";
var newsInfo = "";
var photoInfo = "";
var i;
for (i = 0; i < obj.count ; i++)
{
var item = obj.value.items[i];
if (item.type == "location") {
locationInfo = "Information for <b><u>" +
item.city + ", " + item.state + ", " + item.country +
"</u></b> [" + "Latitude: " + item.lat +
" Longitude: " + item.long + "]<br/>";
} else if (item.type == "interest") {
interestInfo += "<b><a href=" + item.link +
">" + item.title + "</a></b>. <span id=desc>" +
item.description + "</span <br/>";
} else if (item.type == "photo") {
photoInfo += item.description + "<b><a href=" +
item.link + ">" + item.title + "</a></b><br/>";
} else {
newsInfo += "<b><a href=" + item.link + ">" + item.title +
"</a></b>. <span id=desc>" + item.description +
"</span><br/>";
}
}

document.getElementById("location").innerHTML = locationInfo;
document.getElementById("news").innerHTML = newsInfo;
document.getElementById("interest").innerHTML = interestInfo;
document.getElementById("photos").innerHTML = photoInfo;
}

The output looks like this:

You can run or save this example using this link. This link shows data for city as “New York” and interest as “Italian Restaurant”, but with little code change you can add a form to accept and dynamically change these values.

It’s as simple as that to create a Mashup with rich information gathered from Google News, Yahoo Local and Flickr! Combine the power of Yahoo pipes with the callback feature, and you get something even more useful!