All of the source code for this example is available from gist.github.com. Go ahead and open up that gist link to follow along.

In our HTML page, we include two JavaScript files. The first is a FeedStitch group, in JSON format, as evidenced by the .json extension. Notice that we’re adding a variable, feedstitch, as a parameter. When you use do this, FeedStitch modifies its output to assign the JSON object to the variable we name. You can also specify the name of a JavaScript function using the callback parameter; if you do this, FeedStitch modifies its output to call that callback function with the JSON text as an argument. This technique, sometimes called JSONP, allows you to simply include the FeedStitch script and have a JavaScript object automatically prepared with the contents of the group.

(This would be a good place to mention that this technique allows the remote site (in this case, FeedStitch) to theoretically inject any content into your web page. At FeedStitch, we are only interested in good, not evil, so we will never intentionally use this functionality to do evil things. But you should still proceed thus informed.)

The second JavaScript file does all the work of inserting the group content into the page. Using the standard DOM methods, we create a list and populate it with entries from our group. This is only one way to do it, and it’s frankly the hard way; the easy way would be to use jQuery and its JSON parser. Keith Muth covers using jQuery on the Viget Inspire blog, if you’re interested in seeing a different approach.

Since we didn’t write any CSS, this looks plain, but our group is there on the page:

This demonstration is pretty basic, but given that parsing the JSON produces a full-fledged JavaScript object, there are all kinds of possibilities, like widgets, desktop clients, or anything else. If JavaScript’s not your language of choice, JSON parsers are available for nearly every modern programming language. Give it a try and see what you can do with FeedStitch and JSON!