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 = [];
        }
    });
}
...
...
...

Comments

Post a Comment

Popular posts from this blog

Power Pages Manifest Explained related to Collaborative Development and ALM

-
In the Microsoft Power Pages, understanding the nuances of configuration files like the `manifest.yml` and environment-specific manifests (e.g., `dev.crm4.dynamics.com-manifest.yml`) is crucial. These files play a significant role in managing and deploying Power Pages sites, particularly in collaborative and ALM contexts. Understanding the Manifest.yml File First of all, always refer to the official documentation on how the power platform cli tool is supported. Creation and Usage Creation : The manifest.yml is generated through the pac powerpages download command. It serves as a snapshot of the Power Pages site's configuration, capturing details like page templates, form settings, and access permissions. Example: When you run this command, it creates a manifest.yml file that includes details of all the components such as web forms, entity lists, and site settings configured in the Power Pages site. Usage : The pac powerpages upload command utilizes the manifest.yml file to updat...
Read more

Exploring the Power of Variables in Liquid and Power Pages

-
Covering the basics - Variables As a templating language, Liquid offers a rich collection of possibilities for web developers and designers, bringing Dynamics business data to the web. Variables in Liquid enable us to display dynamic content and enable us to implement a certain level of custom logic as well. We'll have a look at some examples on how to work with variables. Variable Assignment In Liquid, variables can be assigned values using the {% assign %} tag. For example, let's assign the value "Hello, Nerd!" to the variable greeting: {% assign greeting = 'Hello, Nerd!' %} Variable Output Once a variable is assigned a value, it can be outputted using the {{ }} syntax. To display the value of greeting, we can use: {{ greeting }} Assigning Site Settings Liquid is powerfull enough to allow you to assign values from site settings to variables. For example, if you need the site setting for inactivity for ...
Read more

Create an interactive HTML5 Canvas using event handlers.

-
Image
You can use HTML5 Canvas as an alternative approach designing info graphics, branding graphics etc. Using the example in my previous blog post, I will add a clickable area on the canvas and use a JavaScript event handler to execute some logic. This is the result of the previous example. I want to pop an alert Box when clicking inside the logo. I need to create an object reflecting the coordinates I want my clickable zone to have. I’m also throwing in an id/name. var CustFigure = function (x, y, height, width, name ) { this.x = x; this.y = y; this.height = height; this.width = width; this.name = name; }; In this case I just create a global Array that I can pop the objects on to.   var custFigures = []; At some point (I choose to include it in the function drawing  the logo) we create the object with the desired coordinates and push it on to the array. var custFigure = new CustFigure(50, 50, 75+50, 75+50, " Hello ...
Read more