Javascript: how do I convert text to an xml object?

Question

I have a data.js file responsible for loading a list of urls from an rss feed.  The first time I hit the web server, but after that I save the returned xml and re-load from a local file.

I was able to do most of it, but I am stuck on one feature: once I read the data from the local file as a string, how do I convert it back to xml so I can call 'xml.selectNodes("rss/channel/item");' ?

I have sample code below, the line I'm stuck in is the one right after this comment -

	       // My problem is here: how do I convert the 'data' string to xml, similar to result.responseXML above?
		   // xml = XML.parse(data); // ??

Thanks for any help -
e

(function () {
"use strict";

var fileNameLocal = "services.xml";
var request = "http://www.mysite.com/myrss.xml";

var groupDescription = "Group Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tempor scelerisque lorem in vehicula. Aliquam tincidunt, lacus ut sagittis tristique, turpis massa volutpat augue, eu rutrum ligula ante a ante";
var itemDescription = "Item Description: Pellentesque porta mauris quis interdum vehicula urna sapien ultrices velit nec venenatis dui odio in augue cras posuere enim a cursus convallis neque turpis malesuada erat ut adipiscing neque tortor ac erat";
var itemContent = "<p>Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse quisque donec dis praesent accumsan bibendum pellentesque condimentum adipiscing etiam consequat vivamus dictumst aliquam duis convallis scelerisque est parturient ullamcorper aliquet fusce suspendisse nunc hac eleifend amet blandit facilisi condimentum commodo scelerisque faucibus aenean ullamcorper ante mauris dignissim consectetuer nullam lorem vestibulum habitant conubia elementum pellentesque morbi facilisis arcu sollicitudin diam cubilia aptent vestibulum auctor eget dapibus pellentesque inceptos leo egestas interdum nulla consectetuer suspendisse adipiscing pellentesque proin lobortis sollicitudin augue elit mus congue fermentum parturient fringilla euismod feugiat</p><p>Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse quisque donec dis praesent accumsan bibendum pellentesque condimentum adipiscing etiam consequat vivamus dictumst aliquam duis convallis scelerisque est parturient ullamcorper aliquet fusce suspendisse nunc hac eleifend amet blandit facilisi condimentum commodo scelerisque faucibus aenean ullamcorper ante mauris dignissim consectetuer nullam lorem vestibulum habitant conubia elementum pellentesque morbi facilisis arcu sollicitudin diam cubilia aptent vestibulum auctor eget dapibus pellentesque inceptos leo egestas interdum nulla consectetuer suspendisse adipiscing pellentesque proin lobortis sollicitudin augue elit mus congue fermentum parturient fringilla euismod feugiat</p><p>Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse quisque donec dis praesent accumsan bibendum pellentesque condimentum adipiscing etiam consequat vivamus dictumst aliquam duis convallis scelerisque est parturient ullamcorper aliquet fusce suspendisse nunc hac eleifend amet blandit facilisi condimentum commodo scelerisque faucibus aenean ullamcorper ante mauris dignissim consectetuer nullam lorem vestibulum habitant conubia elementum pellentesque morbi facilisis arcu sollicitudin diam cubilia aptent vestibulum auctor eget dapibus pellentesque inceptos leo egestas interdum nulla consectetuer suspendisse adipiscing pellentesque proin lobortis sollicitudin augue elit mus congue fermentum parturient fringilla euismod feugiat</p><p>Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse quisque donec dis praesent accumsan bibendum pellentesque condimentum adipiscing etiam consequat vivamus dictumst aliquam duis convallis scelerisque est parturient ullamcorper aliquet fusce suspendisse nunc hac eleifend amet blandit facilisi condimentum commodo scelerisque faucibus aenean ullamcorper ante mauris dignissim consectetuer nullam lorem vestibulum habitant conubia elementum pellentesque morbi facilisis arcu sollicitudin diam cubilia aptent vestibulum auctor eget dapibus pellentesque inceptos leo egestas interdum nulla consectetuer suspendisse adipiscing pellentesque proin lobortis sollicitudin augue elit mus congue fermentum parturient fringilla euismod feugiat</p><p>Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse quisque donec dis praesent accumsan bibendum pellentesque condimentum adipiscing etiam consequat vivamus dictumst aliquam duis convallis scelerisque est parturient ullamcorper aliquet fusce suspendisse nunc hac eleifend amet blandit facilisi condimentum commodo scelerisque faucibus aenean ullamcorper ante mauris dignissim consectetuer nullam lorem vestibulum habitant conubia elementum pellentesque morbi facilisis arcu sollicitudin diam cubilia aptent vestibulum auctor eget dapibus pellentesque inceptos leo egestas interdum nulla consectetuer suspendisse adipiscing pellentesque proin lobortis sollicitudin augue elit mus congue fermentum parturient fringilla euismod feugiat</p><p>Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse quisque donec dis praesent accumsan bibendum pellentesque condimentum adipiscing etiam consequat vivamus dictumst aliquam duis convallis scelerisque est parturient ullamcorper aliquet fusce suspendisse nunc hac eleifend amet blandit facilisi condimentum commodo scelerisque faucibus aenean ullamcorper ante mauris dignissim consectetuer nullam lorem vestibulum habitant conubia elementum pellentesque morbi facilisis arcu sollicitudin diam cubilia aptent vestibulum auctor eget dapibus pellentesque inceptos leo egestas interdum nulla consectetuer suspendisse adipiscing pellentesque proin lobortis sollicitudin augue elit mus congue fermentum parturient fringilla euismod feugiat</p><p>Curabitur class aliquam vestibulum nam curae maecenas sed integer cras phasellus suspendisse quisque donec dis praesent accumsan bibendum pellentesque condimentum adipiscing etiam consequat vivamus dictumst aliquam duis convallis scelerisque est parturient ullamcorper aliquet fusce suspendisse nunc hac eleifend amet blandit facilisi condimentum commodo scelerisque faucibus aenean ullamcorper ante mauris dignissim consectetuer nullam lorem vestibulum habitant conubia elementum pellentesque morbi facilisis arcu sollicitudin diam cubilia aptent vestibulum auctor eget dapibus pellentesque inceptos leo egestas interdum nulla consectetuer suspendisse adipiscing pellentesque proin lobortis sollicitudin augue elit mus congue fermentum parturient fringilla euismod feugiat";

// These three strings encode placeholder images. 
var lightGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY7h4+cp/AAhpA3h+ANDKAAAAAElFTkSuQmCC";
var mediumGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY5g8dcZ/AAY/AsAlWFQ+AAAAAElFTkSuQmCC";
var darkGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY3B0cPoPAANMAcOba1BlAAAAAElFTkSuQmCC";

var groups = [
	{ key: "group1", title: "group1", subtitle: "Services", backgroundImage: lightGray, description: groupDescription },
	{ key: "group2", title: "group2", subtitle: "Account", backgroundImage: mediumGray, description: groupDescription }
];

function groupKeySelector(item) {
	return item.group.key;
}

function groupDataSelector(item) {
	return item.group;
}

// 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; });
}

var list = new WinJS.Binding.List();
var groupedItems = list.createGrouped(groupKeySelector, groupDataSelector);

function processItems(xml, statusCode) {
	if (xml) {
		var items = xml.selectNodes("rss/channel/item");

		if (items) {
			var length = Math.min(100, items.length);

			for (var i = 0; i < length; i++) {
				var title = items[i].selectSingleNode("title").text;
				var link = items[i].selectSingleNode("link").text;

				var item = { group: groups[0], title: title, subtitle: link, description: itemDescription, content: itemContent, backgroundImage: lightGray };
				list.push(item);
			}
		} else {
			displayError("There are no updated items available at this time.");
		}
	} else {
		displayError("Unable to retrieve data at this time. Status code: " + statusCode);
	}
}

function displayError(message) {
	var msg = Windows.UI.Popups.MessageDialog(message);
	msg.commands.append(new Windows.UI.Popups.UICommand('Ok'));
	msg.showAsync();
}

var getItemsDistant = function (onload) {
	var localFolder = Windows.Storage.ApplicationData.current.localFolder;

	WinJS.xhr({ url: request }).then(
		function (result) {
			processItems(result.responseXML, result.status);

			var textResponse = result.responseText;

			localFolder.createFileAsync(fileNameLocal,
			Windows.Storage.CreationCollisionOption.replaceExisting).then(function (file) {
				Windows.Storage.FileIO.writeTextAsync(file, textResponse);
			});

			if (onload)
				onload();
		},
		function (result) {
			processItems(null, result.status);
		}
	);
}

var getItems = function (onload) {
	var localFolder = Windows.Storage.ApplicationData.current.localFolder;

	localfolder.getfileasync(fileNameLocal).done(function (file) {
	   return windows.storage.fileio.readtextasync(file).then(function (data) {
	       // My problem is here: how do I convert the 'data' string to xml, similar to result.responseXML above?
	       // xml = XML.parse(data); // ??
	       processitems(data, 200);

	       if (onload)
	           onload();
	   });
	}, function () {
	   getItemsDistant(onload);
	});
}

    WinJS.Namespace.define("data", {
        items: groupedItems,
        groups: groupedItems.groups,
        getItemsFromGroup: getItemsFromGroup,
        Init: getItems
    });
})();

Answer 1

Hi Emmanual,

You can use the XmlDocument close and LoadXML:

http://msdn.microsoft.com/en-us/library/windows/apps/br206173.aspx#Y0

-Jeff

---

Jeff Sanders (MSFT)

Answer 2

I hear that support for XmlDocument is being dropped in IE9.  I'm looking for the best way to do this in the context of a Windows 8 HTML/JS Metro app - is XmlDocument supported in this context; is it the best and safest way?

Answer 3

IE 9 has been out for a while and it wasn't dropped.

This documentation is current. 

-Jeff

---

Jeff Sanders (MSFT)

Answer 4

Ok, this worked -

  var xmlDocument = new Windows.Data.Xml.Dom.XmlDocument();
  xmlDocument.loadXml(data);

I had to update my processItems() function, since retrieving the values is a bit different when using XmlDocument() -

  var title = items[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
  var link = items[i].getElementsByTagName("link")[0].childNodes[0].nodeValue;

Thanks!
http://about.me/ehuna