JSON 2 POSH

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 to the right shows the last 5 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.

Example

Toggle CSS | CSS used