JSON 2 POSH (json2posh.js) allows for easy conversion of JSON objects into Plain Old Semantic HTML. Arrays are converted to Ordered Lists (OL) and objects are converted to Unordered Lists (UL) where each List Item (LI) has a class equal to the key of the value in the object. Strings are checked for urls which are automatically converted into links. Booleans, numbers and null are converted to strings. The result is then stored in a placeholder div. CSS is used to format the output. The example below shows the last 20 messages from my Twitter stream by using Twitter's JS badge. The code for the callback function is:
function showTweets(obj) {
placeInHolder('results', obj, "tweets");
$('ol#tweets > li > ul > li.text').map(function() {
$(this).siblings("li.created_at").remove().insertAfter($(this));
});
}
The callback uses the placeInHolder function to
generate the HTML from the input obj. The top-level
node of the generated HTML has it's id attribute set to
tweets and is then placed in the placeholder div
which is named results. The
jQuery code after is to make
sure that the text of the tweet and date are in the correct
order as JSON objects, rightfully, do not encapsulate order.