Displaying Your FeedStitch JSON Feed Using jQuery

In this post I'm going to show you how to display your FeedStitch feed on your site using a few simple lines of jQuery. FeedStitch is a site we made to allow users to aggregate feeds quickly and easily, and then offer various output options for the feeds users create. When FeedStitich first launched Mark Cornick wrote about parsing FeedStitch’s JSON feed with plain old JavaScript. As he pointed out, his example was just one way to do it and is less bulky than including the entire jQuery library, but it is a little more complex for people not accustomed to writing straight JavaScript. The designers here at Viget use the jQuery framework for most of our JavaScript needs so we usually have the library loading into most of our sites anyway. One of the great features in jQuery is that it can easily parse JSON feeds using the $.getJSON() function. This is something I have touched on before in my previous post about pulling your Flickr feed.

For this example, I made a FeedStitch feed with all the Viget blogs aggregated into single feed. If you go to a FeedStitch feed, you can grab the JSON feed at the very bottom of the page (next to the RSS feed icon). When looking at the raw JSON feed you'll probably see a mess of all kinds of variables and text, but here is what the beginning of the FeedStitch JSON feed looks like if we format it nicely:

({"group": { "slug": "viget-feeds", "entries": [ { "unique_id": "tag:viget.com,2009:extend/4.1539", "title": "Look Out! It\u2019s Developer Day in DC!", "raw_content": "\r\n\r\n\r\n <p>That's right...", "url": "http://feedproxy.google.com/...", "raw_title": "Look Out! It\u2019s Developer Day...", "feed_id": 48, "content": "\r\n\r\n\r\n <p>That's right...", "published_at": "2009-04-15T10:05:00Z", },
 ...and the feed continues with even more groups of "entries"

Each of those variables inside "entries" is something jQuery can latch onto so we just need to tell it how to find them. For this example we'll use the variables "title" and "url". Here is the jQuery to pull the ten latest posts from my FeedStitch feed:

$(document).ready(function(){ //Tell the function where the feed is located $.getJSON("http://feedstitch.com/keith/viget-feeds.json?callback=?", function(data){ //Grab each of the "entries" $.each(data.group.entries, function(i,item){ //Only grab "entries" 10 times if(i < 10){ //Create the links and throw them //into the body of the page $("body").append("<p><a href='"+item.url+"'>"+item.title+"</a></p>"); } }); }); }); 

Obviously making individual links inside paragraph tags probably isn't what you want to be doing; it is just an easy example. You can tailor what markup is being created depending on your needs. The great thing is that this can be applied to any of the FeedStitch JSON feeds, and understanding how this works will allow you to use jQuery to parse any JSON feed.

Here is a link to my example where I created links inside a list using jQuery, similar to what Mark had done in his article

So, you might be asking yourself "Why use FeedStitch when I can use Yahoo Pipes?" Good question, and I have gotten that question a lot. The answer is that you could do the exact same thing we made here with Yahoo Pipes since it offers a JSON feed as well. I actually think its an amazing service and I encourage everyone to try it out. Yahoo Pipes is great because it can do A LOT but for that reason it can be complicated for some people. FeedStitch was created to make it easy for anyone to do one thing: make a single aggregated feed of all their other feeds. Plus, you can share your FeedStitch feed with other people so it has more of a "community" feel to it. Try it out!