Blogger Ever

How to fetch Blogger feed data using native Javascript?

Using Blogger JSON API you can extract out recent post. This post will show you how to extract Blogger recent post
Blogger Recent Post Using JSON API

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:
ObjectDescriptionExample
json.feed.id.$tShow blog IDtag:blogger.com,1999:blog-12345
json.feed.updated.$tLast update of a blog2013-07-08T18:21:57.051+07:00
json.feed.category[]Categories / label array of a blog
json.feed.category[i].termShow the i-th categoryBlogger
json.feed.title.$tShow blog nameBlogger Ever
json.feed.subtitle.$tShow description of a blogThe developers blog
json.feed.author[]Array of blog authorsMohammad Hamza, Abdul Mueed
json.feed.author[i].name.$tShow the i-th blog author nameMohammad Hamza
json.feed.author[i].uri.$tShow the i-th profile author urihttps://profiles.google.com/123456789
json.feed.openSearch$totalResults.$tShow total posts777
json.feed.entry[]Posts array of a blog
json.feed.entry[i].id.$tShow the i-th post IDtag:blogger.com,1999:blog-8508.post-12345678
json.feed.entry[i].title.$tShow the i-th post titleBlogger JSON Feed API
json.feed.entry[i].published.$tShow time published of the i-th post2013-07-07T12:56:00.000+07:00
json.feed.entry[i].updated.$tShow when the i-th post is updated2013-07-07T12:56:47.089+07:00
json.feed.entry[i].category[]Show array of post categories
json.feed.entry[i].category[x].termShow the x-th category of the i-th postBlogger API
json.feed.entry[i].summary.$tShow post summaryMaybe sometimes we need a widget ...
json.feed.entry[i].content.$tShow post contentMaybe 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].hrefShow the x-th link of the i-th posthttp://www.bloggerever.com/2013/blogger.html
json.feed.entry[i].author[]Array of post authors
json.feed.entry[i].author[x].name.$tName of the x-th author on the i-th postDanang Probo Sayekti
json.feed.entry[i].author[x].uri.$tShow uri author profilehttps://plus.google.com/+bloggerever
json.feed.entry[i].author[x].gd$image.srcImage uri of the x-th author profile on the i-th post//lh4.googleusercontent.com/photo.jpg
json.feed.entry[i].media$thumbnail.urlShow image on the i-th posthttp://3.bp.blogspot.com/logo.jpg
json.feed.entry[i].thr$total.$tShow total threaded comments7
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. 
Blogger

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.