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

Designing and programming - Part 2

-
This part of the series will handle the creative part of the cycle. You might loosely categorize the steps of the design process in three different stages. First is the creative methods - this stage contains methods that drives the design project forward adding new ideas and features to the design. However, systemizing the ideas and filtering them is also part of this stage. The next stage contains different methods of implementation. This is where the ideas meet the matter - where ideas become code and components. You get the idea:) The third and last stage is perhaps the most crucial one. This is where you test and evaluate your results. It is now that you have to decide whether the implementations meet with the requirements and visions of the design. The outcome of this stage will determent if the prototype is ready for some real world testing, also called a beta. Anyways, after clearing that up, the creative stage is what this part of the series will be all about. The Creati
Read more

Filtering Dropdown choices in a Power Pages form using Dataverse Relations

-
Image
Filter dropdowns Dropdown filters are a useful feature in form design, allowing users to filter options in one dropdown based on other selections in the form. In Power pages, leveraging the capabilities of Dataverse relations makes it possible to create these powerful filtering mechanisms. This is how it works. What you need to know first. Before we dive into the implementation details, ensure that you have a basic understanding of Power Pages forms and Dataverse relations.  How is´t made Create two tables in your Dataverse environment: "Type" and "Category." These tables will hold the relevant data for the dropdowns. Establish a Lookup Relationship between the "Category" and "Type" tables. Create a lookup column in the "Category" table that references the "Type" table. This lookup column will allow us to filter the categories based on the selected type. Now, create a third table called "Request." This table will ser
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