Quickstart: Accessing a web feed (Windows Store apps using JavaScript and HTML)

This topic will show you how to use the Syndication feature to enable your app to retrieve and display a web feed.

Prerequisites

The following examples use JavaScript and are based on the Syndication sample. For general help creating a JavaScript Windows Store app, see Create your first Windows Store app using JavaScript. Additionally, JavaScript promises are used in this topic to complete asynchronous operations. For more information on this programming pattern, see Asynchronous programming in JavaScript using promises.

To ensure your Windows Store app is network ready, you must set the capability in the project Package.appxmanifest file. For a definition of each network capability, see How to configure network isolation capabilities.

Instructions

Retrieving a syndicated content from a web feed

Now we will review some code that demonstrates how to retrieve a feed, and then display each individual item that the feed contains. Before we can configure and send the request, we'll define a few variables we'll be using during the operation, and the initialize an instance of SyndicationClient, which defines the methods and properties we'll use to retrieve and display the feed.

var currentFeed = null;
var currentItemIndex = 0;
        
var client = new Windows.Web.Syndication.SyndicationClient();

Next we configure request by setting any Server credentials (ServerCredential), proxy credentials (ProxyCredential), and HTTP headers (SetRequestHeader). With the basic request parameters configured, a valid Uri object, created using a feed URI string provided by the app, is then passed to the RetrieveFeedAsync function to request the feed.

Assuming the desired feed content was returned, the code iterates through each feed item, calling displayCurrentItem (which we define next), to display items and their contents as a list through the UI.

client.setRequestHeader("User-Agent", "Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0)");

client.retrieveFeedAsync(uri).done(function (feed) {
    currentFeed = feed;

    WinJS.log && WinJS.log("Feed download complete.", "sample", "status");

    var title = "(no title)";
    if (currentFeed.title) {
        title = currentFeed.title.text;
    }
    document.getElementById("CurrentFeedTitle").innerText = title;

    currentItemIndex = 0;
    if (currentFeed.items.size > 0) {
        displayCurrentItem();
    }

// List the items.
displayLog("Items: " + currentFeed.items.size);

In the previous step, our retrieveFeedAsync call returned the requested feed content and the example code got to work iterating through available feed items. Each of these items is represented using a SyndicationItem object that contains all of the item properties and content afforded by the relevant syndication standard (RSS or Atom). In the following example we observe the displayCurrentItem function working through each item and displaying its content through various named UI elements.

function displayCurrentItem() {
    var item = currentFeed.items[currentItemIndex];

    // Display item number.
    document.getElementById("Index").innerText = (currentItemIndex + 1) + " of " + currentFeed.items.size;

    // Display title.
    var title = "(no title)";
    if (item.title) {
        title = item.title.text;
    }
    document.getElementById("ItemTitle").innerText = title;

    // Display the main link.
    var link = "";
    if (item.links.size > 0) {
        link = item.links[0].uri.absoluteUri;
    }

    var link = document.getElementById("Link");
    link.innerText = link;
    link.href = link;

    // Display the body as HTML.
    var content = "(no content)";
    if (item.content) {
        content = item.content.text;
    }
    else if (item.summary) {
        content = item.summary.text;
    }
    document.getElementById("WebView").innerHTML = window.toStaticHTML(content);

As suggested earlier, the type of content represented by a SyndicationItem object will differ depending on the feed standard (RSS or Atom) employed to publish the feed. For example, an Atom feed is capable of providing a list of Contributors, but an RSS feed is not. However, extension elements included in a feed item that are not supported by either standard (e.g., Dublin Core extension elements) can be accessed using the SyndicationItem.ElementExtensions property and then displayed as demonstrated in the following example code:

var bindableNodes = [];
for (var i = 0; i < item.elementExtensions.size; i++) {
     var bindableNode = {
         nodeName: item.elementExtensions[i].nodeName,
         nodeNamespace: item.elementExtensions[i].nodeNamespace,
         nodeValue: item.elementExtensions[i].nodeValue,
     };
     bindableNodes.push(bindableNode);
}

var dataList = new WinJS.Binding.List(bindableNodes);
var listView = document.getElementById("extensionsListView").winControl;
WinJS.UI.setOptions(listView, {
itemDataSource: dataList.dataSource

});

Summary and next steps

In this topic, we retrieved a feed associated with a supplied URI, and displayed the feed content item by item.

For more advanced features like the ability to add, edit, and delete entries within a web feed, see Quickstart: Managing feed entries.

Related topics

Syndication sample

Windows.Web.Syndication

Quickstart: Managing feed entries

Build date: 11/28/2012