CODEWITHSUNDEEP
javascriptajaxjsontwitter
GSimon
GSimon

Reputation: 347

Formatting JSON data to use for Twitter Feed

I am trying to add a Twitter Feed to my website. This simple task has ballooned into a full blown project and I could use some help.

I've registered for Twitter's API and by using this: http://chrissimpkins.github.io/tweetledee/ I am able to retrieve customized JSON data from a Twitter Feed

For example, here is what my Twitter (@HeroGreg) JSON data is:

http://www.davidseaman.com/tweetledee/userjson.php?user=HeroGreg

I understand somewhat how JSON works but considering this is my first attempt at decoding JSON I'm overwhelmed..

Could someone suggest how I could go about converting this data to HTML code? I just need a starting off point, I've seen some examples already but they don't link to an external file so it's hard to learn from them. I'm not asking someone to do my work for me, however it would nice if someone could contribute something other than a link to a page that says "read this guide". Thanks

Edit: Maybe this will do? http://json2html.com/ ...

Upvotes: 0

Views: 575

Answers (2)

GSimon
GSimon

Reputation: 347

The best solution for me was to use JQuery's Get function (as suggested). I hadn't ever used JSON before and here's what I managed:

$(document).ready(function(){
 $.getJSON( "/tweetledee/userjson.php?c=10&user=d_seaman&xrp=1&xrt=1", function(obj) { 
  $.each(obj, function(key, value) { 
         $("#feed").append("<li>"+value.text+"</li><li>"+value.retweet_count+"</li><li>"+value.favorite_count+"</li><li>"+value.user.name+"</li>");
         var date = $('<small>').text(prettyDate(value.created_at));
         $("#feed").append(date);            
  });
 });
});
/*
 * JavaScript Pretty Date
 * Copyright (c) 2011 John Resig (ejohn.org)
 * Licensed under the MIT and GPL licenses.
 */
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";
    }
});

This code gets the following info: Tweets / # of retweets / # of favourites / Username / Date Posted

The script below the JSON script (prettyDate) converts the date to a more simplified format. So instead of it displaying: 'Sat Dec 17 02:20:42 +0000' it says '1 hour ago'

Upvotes: 1

josecatalani
josecatalani

Reputation: 76

Use jQuery ... jQuery.get() .. First parameter its your site URL json, second parameter the callback. Visit jquery website... (Im using mobile, cant paste code rs);

And now you can use foreach to walk through data and print in your view ...

Upvotes: 1

Related Questions