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

    Question

  • 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);
                dataPromises.push(feed.dataPromise);
            });
    
            // 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(
                    "month.abbreviated");
                var dayFmt = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter(
                    "day");
                var yearFmt = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter(
                    "year.full");
                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
                bPosts.push({
                    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>
            </div>
        </div>
    </div>


    Waiting for quick and positive response.

    Thanking you.

    Friday, April 18, 2014 5:52 PM

Answers

  • 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;

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    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
    Moderator