JSON -> LIST - $.each() to process JSON results

by bizamajig

HTML

<script id="tweet">
    var tweets = [{"in_reply_to_status_id":null,"in_reply_to_status_id_str":null,"truncated":false,"created_at":"Thu Jul 05 14:03:48 +0000 2012","in_reply_to_user_id_str":null,"favorited":false,"contributors":null,"coordinates":null,"geo":null,"user":{"id":813286,"is_translator":false,"profile_background_tile":false,"verified":true,"time_zone":"Eastern Time (US & Canada)","location":"Washington, DC","profile_image_url_https":"https:\/\/si0.twimg.com\/profile_images\/2325704772\/wrrmef61i6jl91kwkmzq_normal.png","profile_sidebar_fill_color":"c2e0f6","following":true,"profile_background_image_url_https":"https:\/\/si0.twimg.com\/profile_background_images\/584034019\/tkwyaf768hs9bylnus1k.jpeg","utc_offset":-18000,"default_profile_image":false,"name":"Barack Obama","favourites_count":0,"follow_request_sent":false,"protected":false,"profile_background_color":"77b0dc","notifications":false,"profile_background_image_url":"http:\/\/a0.twimg.com\/profile_background_images\/584034019\/tkwyaf768hs9bylnus1k.jpeg","profile_link_color":"2574ad","description":"This account is run by #Obama2012 campaign staff. Tweets from the President are signed -bo.","statuses_count":4603,"default_profile":false,"profile_image_url":"http:\/\/a0.twimg.com\/profile_images\/2325704772\/wrrmef61i6jl91kwkmzq_normal.png","profile_banner_url":"https:\/\/si0.twimg.com\/brand_banners\/BarackObama\/1341496876\/live","contributors_enabled":true,"followers_count":17222736,"profile_use_background_image":true,"geo_enabled":false,"lang":"en","profile_text_color":"333333","id_str":"813286","url":"http:\/\/www.barackobama.com","screen_name":"BarackObama","created_at":"Mon Mar 05 22:08:25 +0000...

CSS

h3, small, p {
 display:block;      
}
h3 {
 font-size: 20px; 
}
small {
 font-size: 80%;   
}
li {
 margin-top: 15px;   
}

JavaScript

var list = $('<ul>');

$.each(tweets, function(i, tweet){
    var item = $('<li>');
    var name = $('<h3>').text(tweet.user.name);
    var msg = $('<p>').text(tweet.text);
    var date = $('<small>').text(prettyDate(tweet.created_at));
    
    item.append(name, msg, date);
    list.append(item);
});
       

$('body').append(list);

/*
 * JavaScript Pretty Date
 * Copyright (c) 2011 John Resig (ejohn.org)
 * Licensed under the MIT and GPL licenses.
 */

// Takes an ISO time and returns a string representing how
// long ago the date represents.
function prettyDate(time){
    var date = new Date((time || "").replace(/-/g,"/").replace(/[TZ]/g," ")),
        diff = (((new Date()).getTime() - date.getTime()) / 1000),
        day_diff = Math.floor(diff / 86400);
            
    if ( isNaN(day_diff) || day_diff < 0 || day_diff >= 31 )
        return;
            
    return day_diff == 0 && (
            diff < 60 && "just now" ||
            diff < 120 && "1 minute ago" ||
            diff < 3600 && Math.floor( diff / 60 ) + " minutes ago" ||
            diff < 7200 && "1 hour ago" ||
            diff < 86400 && Math.floor( diff / 3600 ) + " hours ago") ||
        day_diff == 1 && "Yesterday" ||
        day_diff < 7 && day_diff + " days ago" ||
        day_diff < 31 && Math.ceil( day_diff / 7 ) + " weeks ago";
}

// If jQuery is included in the page, adds a jQuery plugin to handle it as well
if ( typeof jQuery != "undefined" )
    jQuery.fn.prettyDate = function(){
        return this.each(function(){
            var date = prettyDate(this.title);
            if ( date )
                jQuery(this).text( date );
        });
    };