HOW to get ATOM feed image in Windows 8 Javascript App?


  • Hello
    I want to create an Atom feed reader in Windows 8 App.
    I want to fetch Feed from http://eventsdirectorypk.com/feed/atom/ and show it in an RSS reader app.
    I am using Microsoft RSS reader app sample buil tusing HTML and Javascript.
    I am using following code to fetch data.
    function getFeeds() {
    blogs = [
                key: "blog1",
                url: 'http://eventsdirectorypk.com/feed/atom/',
                title: 'tbd', updatedX: 'tbd',
                acquireSyndication: acquireSyndication, dataPromise: null
                key: "blog2",
                url: 'http://eventsdirectorypk.com/category/entertainment/feed/atom/',
                title: 'tbd', updated: 'tbd',
                acquireSyndication: acquireSyndication, dataPromise: null
    blogs.forEach(function (feed) {
                feed.dataPromise = feed.acquireSyndication(feed.url);
            // Return when all asynchronous operations are complete
            return WinJS.Promise.join(dataPromises).then(function () {
                return blogs;
     function getItemsFromXml(articleSyndication, bPosts, feed) {
            // Get the info for each blog post
            var posts = articleSyndication.querySelectorAll("entry");
            // Process each blog post
            for (var postIndex = 0; postIndex < posts.length; postIndex++) {
                var post = posts[postIndex];
                // Get the title, author, and date published
                var postTitle = post.querySelector("title").textContent;
                var postAuthor = post.querySelector("author > name").textContent;
                var postPublished = post.querySelector("published").textContent;
                // Convert the date for display
                var postDate = new Date(postPublished);
                var monthFmt = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter(
                var dayFmt = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter(
                var yearFmt = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter(
                var blogPostMonth = monthFmt.format(postDate);
                var blogPostDay = dayFmt.format(postDate);
                var blogPostYear = yearFmt.format(postDate);
                // Process the content so it displays nicely
                var staticContent = toStaticHTML(post.querySelector("content").textContent);
                // Store the post info we care about in the array
                    group: feed,
                    key: feed.title,
                    title: postTitle,
                    author: postAuthor,
                    month: blogPostMonth.toUpperCase(),
                    day: blogPostDay,
                    year: blogPostYear,
                    content: staticContent
        var list = getBlogPosts();
        var groupedItems = list.createGrouped(
            function groupKeySelector(item) { return item.group.key; },
            function groupDataSelector(item) { return item.group; }
        WinJS.Namespace.define("Data", {
            items: groupedItems,
            groups: groupedItems.groups,
            getItemReference: getItemReference,
            getItemsFromGroup: getItemsFromGroup,
            resolveGroupReference: resolveGroupReference,
            resolveItemReference: resolveItemReference
        // Get a reference for an item, using the group key and item title as a
        // unique reference to the item that can be easily serialized.
        function getItemReference(item) {
            return [item.group.key, item.title];
        // This function returns a WinJS.Binding.List containing only the items
        // that belong to the provided group.
        function getItemsFromGroup(group) {
            return list.createFiltered(function (item) { return item.group.key === group.key; });
        // Get the unique group corresponding to the provided group key.
        function resolveGroupReference(key) {
            for (var i = 0; i < groupedItems.groups.length; i++) {
                if (groupedItems.groups.getAt(i).key === key) {
                    return groupedItems.groups.getAt(i);
        // Get a unique item from the provided string array, which should contain a
        // group key and an item title.
        function resolveItemReference(reference) {
            for (var i = 0; i < groupedItems.length; i++) {
                var item = groupedItems.getAt(i);
                if (item.group.key === reference[0] && item.title === reference[1]) {
                    return item;

    Please tell me how can i get image.. i am using following template to populate items in a grid view.

    <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
        <div class="item">
            <h4 class="item-title" data-win-bind="textContent: title"></h4>
            <div class="item-overlay">       
                <img data-win-bind="src: thumbnail" />    
                <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: updated"></h6>

    Waiting for quick and positive response.

    Thanking you.

    Friday, April 18, 2014 5:52 PM


  • Hi SajiD,

    If my understanding is correct, you would like to get the image from each atom article?

    Well, take a look at the MSDN atom tutorial: Walkthrough: Create a blog reader (JavaScript and HTML), the article is filled in to the innerHTML and by query for image I think you should be able to get the picture you want..

    See ItemDetail section in Create a blog reader complete code, the item content populate by this line, query for the image should be ok:

    element.querySelector("article .item-content").innerHTML = item.content;


    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Monday, April 21, 2014 2:11 AM