Fetching blogger posts using ajax.

For my showcase webpage, I wanted to show some of my blog posts as a demo. Now getting hold of rss-content is fairly easy in an rss-reader; but as JavaScript objects – not so much.

I came across different pieces and put them together in a solution that gave me a limited number of blog posts as JavaScript objects using ajax and the blogger API.

In the following snippet, I fetch the data using ajax and handle the response building an array of blog posts. Please see my inline comments...

var customShapes = [];

// First I need a container holding the data in a structured way. As I render the content, I traverse through the array handling each object
var blogPosts = [];
...
// As the query will change in different scenarios I keep part of the query string as an argument in the function call.
loadBlogPostAndRender('alt=json-in-script&start-index=1');
...
...
function loadBlogPostAndRender(posts) {

    $.ajax({
        url: 'http://www.someBloggerBlogUrl/feeds/posts/default?' + posts, // The blog url and the variable specifying the query arguments
        type: 'get',  
        dataType: "jsonp", // It is VERY important that you use jsonp and not json to get around cross site scripting restrictions
        success: function (data) {
            try {
                var posturl = ""; // Initiating variables
                var postcontent = "";
                var postCat = "";
                // Traversing the responce handling each post
                for (var i = 0; i < data.feed.entry.length; i++) {
                    // Getting the post url
                    for (var j = 0; j < data.feed.entry[i].link.length; j++) {
                        if (data.feed.entry[i].link[j].rel == "alternate") {
                            posturl = data.feed.entry[i].link[j].href;
                            break;
                        }
                    }
                    // Fetch tags from the blog post
                    for (var k = 0; k < data.feed.entry[i].category.length; k++) {
                        postCat = data.feed.entry[i].category[k].term + " ";
                    }
                    // Fetching the content
                    if ("content" in data.feed.entry[i]) {
                        postcontent = data.feed.entry[i].content.$t;
                    } else if ("summary" in data.feed.entry[i]) {
                        postcontent = data.feed.entry[i].summary.$t;
                    } else {
                        postcontent = "";
                    }
                    // As I want to show any image from the blog post as well, I look for the first image linked up to the blog post.
                    var imgUrl = "";
                    try {
                        imgUrl = $(data.feed.entry[i].content.$t).find('img:first').attr('src');
                    } catch (error) {
                        imgUrl = "http://foo.com/missingimage.png"; // If there is no image, I keep a placeholder backup
                    }
                    // As I only need part of the blog post, I use regular expressions to filter the content and substring to limit the length.
                    var re = /<\S[^>]*>/g;
                    postcontent = postcontent.replace(re, "");
                    //reduce postcontent to 200 characters
                    if (postcontent.length > 200) {
                        postcontent = postcontent.substring(0, 400);
                    }
                    // Getting the title and publication date.
                    var posttitle = data.feed.entry[i].title.$t;
                    var postdate = data.feed.entry[i].published.$t;
                    // I'm done and add the content as an object on to the array.
                    blogPosts.push({ bUrl: posturl, bTitle: posttitle, bContent: postcontent, bDate: postdate, bCategory: postCat, bImgUrl: imgUrl });
                }
            } catch (e) {

            }
        },
        error: function () {
            //        writeErrorMessage("blogCanvas");
        },
        complete: function () {
            // When the request is complete it is time to render the content. 
            listAll(blogPosts);
            // In order to start the next request with a clean slate, I empty the array.
            blogPosts = [];
        }
    });
}
...
...
...