How to fetch Blogger feed data using native Javascript?

In my previous post, I mentioned the necessary all feed URL details and their parameters, but it is not enough to get data. You've just located the data, but you need to fetch and display it as a plain text. So to do it we will use Javascript and use JSON as output (using alt parameter). For data I'm going to fetch recent post of Blogger. Have a look.
The following is JSON path for Blogger data:

Object	Description	Example
json.feed.id.$t	Show blog ID	tag:blogger.com,1999:blog-12345
json.feed.updated.$t	Last update of a blog	2013-07-08T18:21:57.051+07:00
json.feed.category[]	Categories / label array of a blog
json.feed.category[i].term	Show the i-th category	Blogger
json.feed.title.$t	Show blog name	Blogger Ever
json.feed.subtitle.$t	Show description of a blog	The developers blog
json.feed.author[]	Array of blog authors	Mohammad Hamza, Abdul Mueed
json.feed.author[i].name.$t	Show the i-th blog author name	Mohammad Hamza
json.feed.author[i].uri.$t	Show the i-th profile author uri	https://profiles.google.com/123456789
json.feed.openSearch$totalResults.$t	Show total posts	777
json.feed.entry[]	Posts array of a blog
json.feed.entry[i].id.$t	Show the i-th post ID	tag:blogger.com,1999:blog-8508.post-12345678
json.feed.entry[i].title.$t	Show the i-th post title	Blogger JSON Feed API
json.feed.entry[i].published.$t	Show time published of the i-th post	2013-07-07T12:56:00.000+07:00
json.feed.entry[i].updated.$t	Show when the i-th post is updated	2013-07-07T12:56:47.089+07:00
json.feed.entry[i].category[]	Show array of post categories
json.feed.entry[i].category[x].term	Show the x-th category of the i-th post	Blogger API
json.feed.entry[i].summary.$t	Show post summary	Maybe sometimes we need a widget ...
json.feed.entry[i].content.$t	Show post content	Maybe sometimes we need a widget for certain features, but the widgets are not available ...
json.feed.entry[i].link[]	Links array of a post
json.feed.entry[i].link[x].href	Show the x-th link of the i-th post	http://www.bloggerever.com/2013/blogger.html
json.feed.entry[i].author[]	Array of post authors
json.feed.entry[i].author[x].name.$t	Name of the x-th author on the i-th post	Danang Probo Sayekti
json.feed.entry[i].author[x].uri.$t	Show uri author profile	https://plus.google.com/+bloggerever
json.feed.entry[i].author[x].gd$image.src	Image uri of the x-th author profile on the i-th post	//lh4.googleusercontent.com/photo.jpg
json.feed.entry[i].media$thumbnail.url	Show image on the i-th post	http://3.bp.blogspot.com/logo.jpg
json.feed.entry[i].thr$total.$t	Show total threaded comments	7

Following code will extract out your recent post. Replace the highlighted link with your blog link.

<script type="text/javascript">
  function recentPost(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
      for (var j = 0; j < json.feed.entry[i].link.length; j++) {
        if (json.feed.entry[i].link[j].rel == 'alternate') {
          var postUrl = json.feed.entry[i].link[j].href;
          break;
        }
      }
      var postTitle = json.feed.entry[i].title.$t;
      var postSummary = json.feed.entry[i].summary.$t;
     var item = '<div class="item"><h3><a href=' + postUrl + '>' + postTitle + '</h3></a><p>' + postSummary + '</p></div>';
      document.write(item);
    }
  }
</script>
<script src="http://www.bloggerever.com/feeds/posts/summary?max-results=5&alt=json-in-script&callback=recentPost"></script>

Stay tuned to have different recent post widget, InshaAllah in next post I'm going to share recent post in a jQuery animated ticker.