Tuesday, May 5, 2015

Using JavaScript and XSL to retrieve and display a list of NFL Teams in XML format

Here's an example of how to retrieve XML data using simple JavaScript and to display it using a client-side XSL transformation.

In this example we'll use NFL Teams data from a free data service called MySafeInfo. You can view the configurable options for this particular dataset by clicking here. Or you can view the raw data for this example by clicking here.

Since we're using a client-side XSL transformation there is code to handle the XSL transform for browsers that support XSLTProcessor (e.g. Mozilla browsers), and there is an else statement to handle other browsers (e.g. Internet Explorer). It's also worth noting that since this example is in JSFiddle, if you're using Internet Explorer you won't be able to actually see the results since JSFiddle does not allow an ActiveXObject to be created. With that said, if you copy the example to your local testing environment it is cross-browser compatible.

This example relies on JavaScript and uses mysafeinfo.com to retrieve NFL Teams data in XML format. MySafeInfo is a free service we offer to software developers to provide test data in a simple, flexible manner, in a variety of formats, including XML, JSON, JSONP, CSV, and more.

Here are some additional resources I came across while preparing this example.

Matt Pavey is a Microsoft Certified software developer who specializes in ASP.Net, VB.Net, C#, AJAX, LINQ, XML, XSL, Web Services, SQL, jQuery, and more. Follow on Twitter @matthewpavey