Fetch XML feed with AngularJS

AngularJS fetches the JSON feed from external file. But in case if we want to fetch the feed from an XML?

In this post I will let you know the Dependency Injection (DI) available to fetch the XML feed in AngularJS. This post is in continuation of my earlier Introduction of AngularJS post.

Recently, I thought to show my Stack Overflow feed on my blog and started creating a small widget using AngularJS. As Stack Overflow offers user feed in XML format, I started using the same.

In curiosity to learn AngularJS I thought to fetch the XML feed from external file instead of JSON. So I started searching in Google and found there is a DI available for the rescue – X2JS.

Install X2JS using Bower

In case you’re using bower, run the code below on your project directory:

bower install angular-x2js --save

and copy below code to your index file

<script src="bower_components/x2js/xml2json.js"><script>
<script src="bower_components/angular-x2js/src/x2js.js"></script>

Or

Download .js files from Google & .zip from Git and save in scripts folder of project and add a link to it in index file.

From Google

<script src="siteware/scripts/xml2json.js"></script>

From Git

<script src="siteware/scripts/x2js.js"></script>

Dependency Injection – X2JS

Now add DI to main angular module:

angular.module('ngAuidApp', ['cb.x2js']);

That’s it… you ready to use the DI service wherever you want to use, just inject it on controller:

angular.module('ngAuidApp').controller('ProfileCtrl', [
    '$scope',
    'x2js',
    'profileInfoService',
    function ($scope, x2js, profileInfoService) { }]);

JS

So to achieve my mission to display Stack Overflow on my blog I have created a service which fetches feeds from it.

angular.module('ngAuidApp').service('profileInfoService', ['$http', function($http){
    return $http.get('http://stackoverflow.com/feeds/user/3635285');
}]);

Now I have caught the feed in $scope variable so I can call it in my page to display information.

angular.module('ngAuidApp').controller('ProfileCtrl', ['$scope', 'x2js', 'profileInfoService', function ($scope, x2js, profileInfoService) {
    
    profileInfoService.success(function(data){
      var json = x2js.xml_str2json(data);
      $scope.dataSet = json.feed;
    });
    
}]);

HTML

Below is the code for HTML page to display my feed:

<div class="container">
  <h1><a href="{{dataSet.link[1]._href}}" target="_blank">Stack Overflow</a></h1>
  <p>Last Active - {{dataSet.updated|date}}</p>
  
  <h2>Latest Activities:</h2>
  <ol class="list-unstyled">
    <li ng-repeat="entry in dataSet.entry | limitTo:10">
      <article class="entry">
        <h2><a href="{{entry.id}}" target="_blank">{{entry.title.__text}}</a></h2>
        <p>Tags:<span ng-repeat="cat in entry.category"> <a href="http://stackoverflow.com/questions/tagged/{{cat._term}}" target="_blank">{{cat._term}}</a></span></p>
        <p ng-bind-html="entry.summary.__text"></p>
      </article>
    </li>
  </ol>
</div>

Stack Overflow gives 30 latest feeds but you can restrict it to display 5 or 10 as per your need by supplying a AngularJS filter limitTo:10 in the ng-repeat directive.

That’s it folks… the snippet above will display my latest 10 activities from my stack overflow account to anywhere I want. You may try it by replacing your XML feed URL in the service that I have created above.

Do provide your feedback in comment section below.