How to fetch Blogger feed using jQuery $.ajax()

I've discussed to fetch the Blogger feed using native Javascript, however, the jQuery $.ajax() function does the same but using jQuery you can do several more functions like to trigger any plugin. Since it is easy to code jQuery therefore we can take advantages of jQuery's other native functions.

Blogger feed details I've already posted before, therefore we'll jump directly on jQuery. Well, $.ajax() is a pretty useful functions, No matter JSON, xml or html data you name it and you have it. $.ajax() sends an AJAX request to the URL and returns the data. Since we are taking about JSON therefore we can access JSON objects using JSON paths.

Lets have a basic $.ajax() function:

$.ajax({
    type: 'GET',
    url: FEED_URL,
    async: false,
    contentType: "application/json",
    dataType: 'jsonp',
    success: function (json) {

        // Other stuff goes here...

    }
});

Read More: How can you make a single callback after multiple AJAX request in jQuery?

Well this will be the basic structure of the function. make a variable naming FEED_URL.

var FEED_URL="http://bloggerever.com/feeds/posts/summary?max-results=5&alt=json-in-script"

 Well this is the URL I'm going to send the request on, but obviously it will vary blog to blog. Make sure to change the max-results parameter in the URL to get the specfic number of posts.

We know that the posts in the JSON data are more than one therefore we have to create a loop to access each of them.

for (var i = 1; i < json.feed.entry.length; i++) {
}

Now each post will be accessed under this loop. So lets take the post as variable for ease of access.

var post=json.feed.entry[i];

Now lets take the title name of the post.

var title=post.title.$t; 

So what will be the final code for it.

HTML

<div class='recent-post'></div>

jQuery

$.ajax({
    type: 'GET',
    url: FEED_URL,
    async: false,
    contentType: "application/json",
    dataType: 'jsonp',
    success: function (json) {
        for (var i = 1; i < json.feed.entry.length; i++) {
            var post = json.feed.entry[i],
                title = post.title.$t;
            $(title).appendTo('.recent-post');
        }
    }
});

Through this we have achieved the recent post titles, you can modify it to more better level.